Next.js + Jest에서 ES Module 패키지 사용하기

발단

복사
 FAIL  src/components/Input/Input.test.tsx
● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    <...>/node_modules/.pnpm/[email protected]/node_modules/nanoid/index.browser.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { urlAlphabet } from './url-alphabet/index.js'
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

Jest와 ES Module

시도 1. transformIgnorePatterns 추가

복사
// jest.config.ts

import nextJest from 'next/jest';

import type { Config } from 'jest';

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

const esmModules = ['nanoid'];

// Add any custom config to be passed to Jest
const config: Config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  testEnvironment: 'jest-environment-jsdom',
  transformIgnorePatterns: [
    `node_modules/(?!(?:.pnpm/)?(${esmModules.join('|')}))`,
  ],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);

next/jest의 동작

• SWC를 사용한 transform 설정

• 스타일시트(.css, .module.css, .scss, .module.scss), 이미지 import, next/font 자동 모킹

• .env와 .env의 모든 variant를 process.env로 불러오기

• test resolving 및 transform에서 node_modules 무시

• test resolving에서 .next 무시

• SWC transform을 활성화하는 플래그를 위해 next.config.js 불러오기

복사
// ...

export default function nextJest(options: { dir?: string } = {}) {
  // createJestConfig
  return (
    customJestConfig?:
      | Config.InitialProjectOptions
      | (() => Promise<Config.InitialProjectOptions>)
  ) => {
    // Function that is provided as the module.exports of jest.config.js
    // Will be called and awaited by Jest
    return async (): Promise<Config.InitialProjectOptions> => {
      // ...

      // Ensure provided async config is supported
      const resolvedJestConfig =
        (typeof customJestConfig === 'function'
          ? await customJestConfig()
          : customJestConfig) ?? {}

      const transpiled = (nextConfig?.transpilePackages ?? []).join('|')

      // ...

      return {
        ...resolvedJestConfig,

        // ...

        transformIgnorePatterns: [
          // To match Next.js behavior node_modules is not transformed, only `transpiledPackages`
          ...(transpiled
            ? [
                `/node_modules/(?!.pnpm)(?!(${transpiled})/)`,
                `/node_modules/.pnpm/(?!(${transpiled.replace(
                  /\//g,
                  '\\+'
                )})@)`,
              ]
            : ['/node_modules/']),
          // CSS modules are mocked so they don't need to be transformed
          '^.+\\.module\\.(css|sass|scss)$',

          // Custom config can append to transformIgnorePatterns but not modify it
          // This is to ensure `node_modules` and .module.css/sass/scss are always excluded
          ...(resolvedJestConfig.transformIgnorePatterns || []),
        ],

        // ...
      }
    }
  }
}

시도 2. next.config.js에 transpilePackages 추가

복사
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
  transpilePackages: ['nanoid'],
};

module.exports = nextConfig;

복사
> jest -u

 PASS  src/components/Button/Button.test.tsx
 PASS  src/components/Input/Input.test.tsx
 PASS  src/components/Modal/Modal.test.tsx
 PASS  src/components/Spinner/Spinner.test.tsx
 PASS  src/components/Navbar/Navbar.test.tsx
 PASS  src/components/Link/Link.test.tsx

Test Suites: 6 passed, 6 total
Tests:       34 passed, 34 total
Snapshots:   0 total
Time:        1.342 s

Reference

Code Transformation · Jest

Jest runs the code in your project as JavaScript, but if you use some syntax not supported by Node out of the box (such as JSX, TypeScript, Vue templates) then you'll need to transform that code into plain JavaScript, similar to what you would do when building for browsers.

https://jestjs.io/docs/code-transformation

Optimizing: Testing

Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.

https://nextjs.org/docs/pages/building-your-application/optimizing/testing#setting-up-jest-with-the-rust-compiler