[英]Next.js and Jest: SyntaxError: Cannot use import statement outside a module
I am working on a Next.js project using TypeScript and for testing I use Jest and React Testing Lib.我正在使用 TypeScript 进行 Next.js 项目,并使用 Jest 和 React 测试库进行测试。 However, I encounter a SyntaxError: Cannot use import statement outside a module for components where I import rehype-raw .但是,我遇到了SyntaxError: Cannot use import statement outside a module for components where I import rehype-raw 。
As far as I understand this, Jest does not support ES6 so node_modules may need to be transformed.据我了解,Jest 不支持 ES6,因此 node_modules 可能需要进行转换。 This can be configured using transformIgnorePatterns
.这可以使用transformIgnorePatterns
进行配置。 For example if rehype-raw
is causing this error using "transformIgnorePatterns": ["node_modules/(?!rehype-raw)/"]
should allow transformation of the rehype-raw
but no other module.例如,如果rehype-raw
使用"transformIgnorePatterns": ["node_modules/(?!rehype-raw)/"]
应该允许转换rehype-raw
但不允许转换其他模块。 And thus solve this error.从而解决这个错误。
However, this does not work for me.但是,这对我不起作用。 But idk why and how I can solve this.但是我知道为什么以及如何解决这个问题。 No suggested solution I have found could solve this problem.我发现没有建议的解决方案可以解决这个问题。 I have attached my error output , jest.config.js and babel.rc file below.我在下面附上了我的错误 output 、 jest.config.js和babel.rc文件。
Error output错误 output
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 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 babel.rc
{
"presets": ["next/babel"]
}
Next has already out-of-the-box support for Jest, I'd suggest you follow the steps provided in the docs . Next 已经对 Jest 提供了开箱即用的支持,我建议您按照文档中提供的步骤进行操作。
Did you already use type:"module" in package.json?您是否已经在 package.json 中使用了 type:"module"?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.