Next.js and Jest: SyntaxError: Cannot use import statement outside a module
Next.js and Jest: SyntaxError: Cannot use import statement outside a module
我正在使用 TypeScript 开发一个 Next.js 项目,为了测试,我使用 Jest 和 React Testing Lib。但是,我遇到 SyntaxError: Cannot use import statement outside a module 对于我导入 rehype-raw.
的组件
据我了解,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/'),
'^@test/faker/(.*)$': resolve(__dirname, './test/faker/'),
'^@components/(.*)$': resolve(__dirname, './components/'),
'^@pages/(.*)$': resolve(__dirname, './pages/'),
'^@utils/(.*)$': resolve(__dirname, './utils/'),
'^@api/(.*)$': resolve(__dirname, './api/'),
'^@store/(.*)$': resolve(__dirname, './store/'),
},
testEnvironment: 'jsdom',
};
babel.rc
{
"presets": ["next/babel"]
}
您是否已经在 package.json 中使用过 type:"module"?
Next 已经 out-of-the-box 支持 Jest,建议您按照 provided in the docs.
的步骤操作
我正在使用 TypeScript 开发一个 Next.js 项目,为了测试,我使用 Jest 和 React Testing Lib。但是,我遇到 SyntaxError: Cannot use import statement outside a module 对于我导入 rehype-raw.
的组件据我了解,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/'),
'^@test/faker/(.*)$': resolve(__dirname, './test/faker/'),
'^@components/(.*)$': resolve(__dirname, './components/'),
'^@pages/(.*)$': resolve(__dirname, './pages/'),
'^@utils/(.*)$': resolve(__dirname, './utils/'),
'^@api/(.*)$': resolve(__dirname, './api/'),
'^@store/(.*)$': resolve(__dirname, './store/'),
},
testEnvironment: 'jsdom',
};
babel.rc
{
"presets": ["next/babel"]
}
您是否已经在 package.json 中使用过 type:"module"?
Next 已经 out-of-the-box 支持 Jest,建议您按照 provided in the docs.
的步骤操作