Next.js 和 Jest：SyntaxError：不能在模块外使用 import 语句答案

【问题标题】：Next.js and Jest: SyntaxError: Cannot use import statement outside a moduleNext.js 和 Jest：SyntaxError：不能在模块外使用 import 语句
【发布时间】：2022-01-31 01:02:45
【问题描述】：

我正在使用 TypeScript 开发 Next.js 项目，我使用 Jest 和 React 测试库进行测试。但是，对于我导入 rehype-raw 的组件，我遇到了 SyntaxError: Cannot use import statement outside a module。

据我了解，Jest 不支持 ES6，因此可能需要转换 node_modules。这可以使用transformIgnorePatterns 进行配置。例如，如果rehype-raw 使用"transformIgnorePatterns": ["node_modules/(?!rehype-raw)/"] 导致此错误，则应允许转换rehype-raw 但不允许转换其他模块。从而解决这个错误。

但是，这对我不起作用。但是我知道为什么以及如何解决这个问题。我发现没有建议的解决方案可以解决这个问题。我在下面附上了我的错误输出、jest.config.js和babel.rc文件。

错误输出

 FAIL  test/pages/companies/[id].test.tsx                  
  ● Test suite failed to run

    Jest encountered an unexpected token

    [...]

    Details:

    /path/frontend-job/node_modules/rehype-raw/index.js:7
    import {raw} from 'hast-util-raw'
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 | import Image from 'next/image';
      4 | import { Remark } from 'react-remark';
    > 5 | import rehypeRaw from 'rehype-raw';
        | ^
      6 | import rehypeSanitize from 'rehype-sanitize';
      7 | import { logError } from '@utils/logger';
      8 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (components/markdown/JobMarkdown.tsx:5:1)

jest.config.js

const { resolve } = require('path');

module.exports = {
  roots: ['<rootDir>'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
  setupFiles: ['<rootDir>/test/setup.js'],
  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!rehype-raw)/',
  ],
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  moduleNameMapper: {
    // Force mocks: https://github.com/facebook/jest/issues/4262
    '@api/axios': '<rootDir>/test/__mocks__/axios.js',
    // Normal module aliases
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
    '^@test/(.*)$': resolve(__dirname, './test/$1'),
    '^@test/faker/(.*)$': resolve(__dirname, './test/faker/$1'),
    '^@components/(.*)$': resolve(__dirname, './components/$1'),
    '^@pages/(.*)$': resolve(__dirname, './pages/$1'),
    '^@utils/(.*)$': resolve(__dirname, './utils/$1'),
    '^@api/(.*)$': resolve(__dirname, './api/$1'),
    '^@store/(.*)$': resolve(__dirname, './store/$1'),
  },
  testEnvironment: 'jsdom',
};

babel.rc

{
  "presets": ["next/babel"]
}

【问题讨论】：

标签： javascript typescript jestjs next.js babel-jest

【解决方案1】：

Next 已经对 Jest 提供了开箱即用的支持，我建议你按照provided in the docs 的步骤操作。

【讨论】：

我按照文档中的描述尝试了 next/js，还扩展了自定义 jest 配置，但我仍然得到 SyntaxError: Cannot use import statement outside a module
我认为使用github.com/vercel/next.js/discussions/… 可以解决这个语法错误，但是一些模拟不再起作用
当我遇到 OP 的问题时，我发现此线程有一些讨论 + 代码：github.com/remarkjs/react-markdown/issues/…。长话短说，我只是在适当的地方模拟那些表现不佳的 ES6 模块。
next/jest 中有一个错误，但已修复，现在一切正常。

【解决方案2】：

你已经在 package.json 中使用 type:"module" 了吗？

【讨论】：

这对我不起作用。