How to use findPagesDir method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

next.config.js

Source: next.config.js Github

copy
1const { findPagesDir } = require('next/dist/lib/find-pages-dir');
2
3module.exports = {
4  eslint: {
5    ignoreDuringBuilds: true,
6  },
7  reactStrictMode: true,
8  images: {
9    domains: ['images.unsplash.com', 'placeimg.com'],
10  },
11  webpack(config, { defaultLoaders, dev, dir }) {
12    const pagesDir = findPagesDir(dir);
13    ((config.module = config.module || {}).rules = config.module.rules || []).push({
14      test: /\.(js|mjs|jsx)$/,
15      include: [pagesDir],
16      use: [
17        defaultLoaders.babel,
18        {
19          loader: 'babel-loader',
20          options: {
21            sourceMaps: dev,
22            plugins: [
23              require.resolve('babel-plugin-superjson-next'),
24              require.resolve('@babel/plugin-syntax-jsx'),
25            ],
26          },
27        },
28      ],
29    });
30    return config;
31  },
32};
33
Full Screen

main.js

Source: main.js Github

copy
1const { PHASE_PRODUCTION_BUILD } = require('next/constants');
2const { findPagesDir } = require('next/dist/lib/find-pages-dir');
3const loadConfig = require('next/dist/server/config').default;
4const getWebpackConfig = require('next/dist/build/webpack-config').default;
5
6const CWD = process.cwd();
7
8async function webpackFinal(config) {
9  const pagesDir = findPagesDir(CWD);
10  const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD);
11  const nextWebpackConfig = await getWebpackConfig(CWD, {
12    pagesDir,
13    entrypoints: {},
14    isServer: false,
15    target: 'server',
16    config: nextConfig,
17    buildId: 'storybook',
18    rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
19  });
20
21  // Use nextjs's resolve rules so we can get the correct modules.
22  config.resolve = {
23    ...config.resolve,
24    ...nextWebpackConfig.resolve,
25  };
26
27  return config;
28}
29
30module.exports = {
31  core: {
32    builder: 'webpack5',
33  },
34  stories: ['../src/**/*.stories.mdx', '../src/**/*[email protected](js|jsx|ts|tsx)'],
35  addons: [
36    '@storybook/addon-docs',
37    'storybook-addon-next-router',
38    {
39      name: '@storybook/addon-postcss',
40      options: {
41        postcssLoaderOptions: {
42          implementation: require('postcss'),
43        },
44      },
45    },
46  ],
47  webpackFinal,
48};
49
Full Screen

findNextWebpackConfig.js

Source: findNextWebpackConfig.js Github

copy
1// @ts-check
2/// <reference types="next" />
3const debug = require('debug')('@cypress/react')
4const getNextJsBaseWebpackConfig = require('next/dist/build/webpack-config').default
5const { findPagesDir } = require('../../dist/next/findPagesDir')
6const { getRunWebpackSpan } = require('../../dist/next/getRunWebpackSpan')
7const { checkSWC } = require('../../dist/next/checkSWC')
8
9async function getNextWebpackConfig (config) {
10  let loadConfig
11
12  try {
13    loadConfig = require('next/dist/next-server/server/config').default
14  } catch (e) {
15    if (e.code === 'MODULE_NOT_FOUND') {
16      // Starting from 11.0.2-canary.23, the server config file
17      // is not in the next-server folder anymore.
18      // @ts-ignore
19      loadConfig = require('next/dist/server/config').default
20    } else {
21      throw e
22    }
23  }
24  const nextConfig = await loadConfig('development', config.projectRoot)
25  const runWebpackSpan = await getRunWebpackSpan()
26  const nextWebpackConfig = await getNextJsBaseWebpackConfig(
27    config.projectRoot,
28    {
29      buildId: `@cypress/react-${Math.random().toString()}`,
30      config: nextConfig,
31      dev: true,
32      isServer: false,
33      pagesDir: findPagesDir(config.projectRoot),
34      entrypoints: {},
35      rewrites: { fallback: [], afterFiles: [], beforeFiles: [] },
36      ...runWebpackSpan,
37    },
38  )
39
40  debug('resolved next.js webpack config %o', nextWebpackConfig)
41
42  checkSWC(nextWebpackConfig, config)
43
44  return nextWebpackConfig
45}
46
47let webpackConfigCache = null
48
49/** Resolving next.js webpack and all config with plugin takes long, so cache the webpack configuration */
50module.exports = async function findNextWebpackConfig (config) {
51  // ⛔️ ⛔️ Comment this `if` for debugging
52  if (webpackConfigCache !== null) {
53    return webpackConfigCache
54  }
55
56  webpackConfigCache = await getNextWebpackConfig(config)
57  debug('created and cached webpack preprocessor based on next.config.js', webpackConfigCache)
58
59  return webpackConfigCache
60}
61
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)