Jestで SyntaxError: Unexpected token 'export' というエラーが出ます。

Question

実現したいこと

Next.jsプロジェクトでのJestでのテスト実行

前提

Next.jsのプロジェクトをcreate-next-appで作成し、nanoidというライブラリをインストールしてJestでテストを実行したところ、SyntaxError: Unexpected token 'export' というエラーが出ました。
nanoidのimport部分を削除すると問題なくテストが実行されました。

以下の記事を参考に、jest.config.jsに以下を書き加えましたが、全く同じエラーが出ます。

const config = {
  // 追記
  transformIgnorePatterns: [`node_modules/(?!nanoid/)`],
  // その他の設定
}

module.exports = config

参考にした記事：https://beyooon.jp/blog/nanoid-v4-fails-jest/

発生している問題・エラーメッセージ

npm run test でターミナルに出力されるエラーです。
node_modules/nanoid/index.browser.jsというファイルの export でエラーが出ているようです。

> next13-jest-swc@0.1.0 test
> jest

 FAIL  __test__/index.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:

    /Users/user/dev/react-liblary-exmples/next13-jest-swc/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'

      10 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (src/pages/index.tsx:12:17)
      at Object.<anonymous> (__test__/index.test.tsx:7:55)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.11 s
Ran all test suites.

試したこと

前提の部分で参考にした記事によれば、nanoid4以降で発生している問題らしいので、nanoidのverison3をインストールし直してテストを実行してみました。
以下のようなエラーが出ました。
やはり/node_modules/nanoid/index.browser.jsというファイルで、この場合は import でエラーが出ています。

    Details:

    /Users/sekiguchi/dev/react-liblary-exmples/next13-jest-swc/node_modules/nanoid/index.browser.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { urlAlphabet } from './url-alphabet/index.js'
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

該当のソースコード

テスト対象のページ(index.tsx)です

import { nanoid } from 'nanoid'
export default function Home() {
  return (
    <>
    <div>{nanoid()}</div>
    </>

  )
}

テストコード(index.test.tsx)です

import { render } from '@testing-library/react';
import Home from 'pages';

describe('Home component', () => {
  it('render Home component', () => {
    render(<Home />);
  });
});

現状のjest.config.jsです（以下の記事を参考にしました）
https://zenn.dev/uttk/scraps/475390e9d5b820

const fs = require("fs");
const tsconfig = require("./tsconfig.json");

// tsconfigから baseUrl を取得する
const baseUrl = tsconfig.compilerOptions.baseUrl;

// フォルダー名一覧を取得する
const folders = fs.readdirSync(baseUrl, { withFileTypes: true }).flatMap((ele) => {
  return ele.isDirectory() ? [ele.name] : [];
});

/**
 * @type {import("@jest/types").Config.InitialOptions}
 */
const config = {
// tsconfig.json の baseUrl によるエイリアスを有効にする
  moduleNameMapper: folders.reduce((mapper, folderName) => {
    return { ...mapper, [`^${folderName}(.*)$`]: `<rootDir>/src/${folderName}$1` };
  }, {}),

  testEnvironment: 'jsdom',

  testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],

  // @testing-library/react を使うためセットアップスクリプト( 後述 )
  setupFilesAfterEnv: ['<rootDir>/src/test/utils/setup.ts'],

  // 除外するフォルダーを指定する
  testPathIgnorePatterns: [
    '<rootDir>/src/test/utils/', // セットアップが入っているフォルダーは除外する
    '<rootDir>/node_modules/',
    '<rootDir>/.next/',
  ],

  transformIgnorePatterns: [`node_modules/(?!nanoid/)`],

  transform: {
    '.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        sourceMaps: true, // エラーを見やすくする( 有効じゃないと内容がズレて表示されます )

        module: {
          type: 'commonjs', // 出力するファイルをcommonjsとする
        },

        jsc: {
          parser: {
            syntax: 'typescript', // ソースコードをtypescriptとしてパースする
            tsx: true, // jsx記法を許可する
          },

          transform: {
            react: {
              // 必須。省略すると "ReferenceError: React is not defined" が発生します
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
}

module.exports = config

補足情報（FW/ツールのバージョンなど）

バージョン等(package.jsonです)

{
  "name": "next13-jest-swc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "dependencies": {
    "@types/node": "20.2.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "nanoid": "^4.0.2",
    "next": "13.4.3",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@swc/core": "^1.3.59",
    "@swc/jest": "^0.2.26",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.1",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@types/testing-library__user-event": "^4.2.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "ts-jest": "^29.1.0"
  }
}

Comments

[watasida]

試したことなどを補足しました。

[退会済みユーザー]

https://gattino.jp/jest-esm/
こちらの記事が参考になりそうです。
記事抜粋　　
JestはNode上で動作するため、ESモジュールはCommonJSモジュールにトランスパイルされている必要があります。

[watasida]

ありがとうございます。
添付していただいた記事ではbabelで変換する設定をしていますが、私のプロジェクトではswcを使用していまして、swcの設定でcommonJSに変換するような設定が必要なのかもしれません。
その方法については調べてみます。

Answer 1

next-jestを使用することで解決しました。
jest.config.jsを以下のように変更し、テストを実行することができました。

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/src/'],
  roots: ['<rootDir>/src/'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: ['/node_modules/', '<rootDir>/__tests__/utils/setup.ts'],
}

module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: ['node_modules/(?!nanoid/)', '^.+\\.module\\.(css|sass|scss)$'],
})

参考

• next-jestの設定 : https://zenn.dev/a_da_chi/articles/f5341235cbc9b5
• transformIgnorePatternsの設定 : https://github.com/vercel/next.js/issues/36077

Answer 2

解決とは言えませんが、uuidを生成するライブラリとして nanoid ではなく uuid4 を使うことでエラーは解消しました ( uuid4 では ESモジュールを使用していないのでエラーが出ない？）。