有没有办法解决 nextjs 中的"在模块之外找不到导入语句"？

Question

我使用nextjs和安装jest与Babel做单元测试。

当我运行npm测试时，它给了我下面的错误'import'测试失败/页面/index.test.js●测试套件运行失败

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/alex/Desktop/test/tech-blog-web/node_modules/github-slugger/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { regex } from './regex.js'
            ^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
> 2 | import { slug } from "github-slugger";
| ^

我的大部分文件都是。js扩展名和一些。jsx扩展名

我尝试在我的包中添加type:module。. Json并将我的文件名更改为.mjs，但仍然面临此错误。

下面是我的jest.config.js

module.exports = {
collectCoverage: true,

//在节点14。X覆盖提供商v8提供了良好的速度和或多或少好的报告

coverageProvider: 'v8',
coverageReporters: ['json', 'html'],
coverageDirectory: 'coverage',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',

,

testEnvironment: "jest-environment-jsdom",
moduleNameMapper: {
"\.(css|less|scss|sass)$": "identity-obj-proxy",
// Handle module aliases
'^@layouts/(.*)$': '<rootDir>/layouts/$1',
'^@components/(.*)$': '<rootDir>/layouts/components/$1',
'^@partials/(.*)$': '<rootDir>/layouts/partials/$1',
'^@shortcodes/(.*)$': '<rootDir>/layouts/shortcodes/$1',
'^@config/(.*)$': '<rootDir>/config/$1',
'^@json/(.*)$': '<rootDir>/json/$1',
'^@hooks/(.*)$': '<rootDir>/hooks/$1',
'^@lib/(.*)$': '<rootDir>/lib/$1',

},

transform: {
// "^.+\.jsx?$": "babel-jest",
// '^.+\.jsx?$': 'babel-jest',
// '^.+\.js?$': 'babel-jest',
// '^.+\.(js|jsx)$': 'babel-jest',
// '^(github-slugger)$': 'babel-jest',
// "^.+\.mjs$": "babel-jest",
'^.+\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],

},

moduleFileExtensions: ["js", "jsx", "json", "node", "md"],
setupFilesAfterEnv: ['./setupTests.js'],
testPathIgnorePatterns: [
//'<rootDir>/node_modules/', 
"<rootDir>/node_modules/(?!(github-slugger)/)",
// '<rootDir>/.next/',
// '<rootDir>/setupTests.js',
],
};

.babelrc

"presets": [
"@babel/preset-env",
"@babel/preset-react"
]

请帮助我。我试着这样做了3天，老实说，感觉很失落。

我尝试添加'node:module'到我的package.json

我尝试了从。js到。mjs的剩余文件

我试了很多次修改我的jest.config.js &.babelrc但没有成功

Answer 1

相关细节表明github-slugger是使用ESM发布的。

Details:
/Users/alex/Desktop/test/tech-blog-web/node_modules/github-slugger/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { regex } from './regex.js'
            ^^^^^^

在运行测试之前，您应该通过在Jest配置中包含该依赖项，如

transformIgnorePatterns: ['/node_modules/(?!(github-slugger)/)']

详情见transformIgnorePatterns