Jest遇到了一个意外的标记

Question

我是单元测试的新手。我用react typescript我写了一个单元测试，由于import，它在第一行就失败了。

误差:

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.
Details:
/app/node_modules/axios/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';                                                                                  ^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import {AxiosError, AxiosInstance, AxiosResponse} from "axios";

配置：package.json

"devDependencies": {
"@babel/core": "^7.20.7",
"@testing-library/dom": "^8.19.1",
"@testing-library/react": "^13.4.0",
"@types/testing-library__react": "^10.2.0",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.3.1",
"eslint": "8.30.0",
"eslint-config-react-app": "^7.0.1",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.1",
"react-test-renderer": "^18.2.0",
"tailwindcss": "^3.2.4",
"ts-jest": "^29.0.3"
}

balel.config.js:

module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};

jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
transform: {
'^.+\.ts?$': 'ts-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
};

Answer 1

图案:'^.+\.ts?$'是错误的

<标题>修复h1> 该是:'^.+\.tsx?$'。 <标题>更多h1> 能还有其他问题。建议创建一个新项目，并与你的项目进行比较。

来自官方文档:https://kulshekhar.github.io/ts-jest/docs/getting-started/options

Answer 2

为什么会出现这个错误?

1. x。x版本的axios将模块类型从CommonJS更改为ECMAScript。

0. x。axios index.js文件的x版本

module.exports = require('./lib/axios');

1. x。axox index.js文件的x版本

import axios from './lib/axios.js';
export default axios;

基本上，jest运行在Node.js环境中，所以它使用CommonJS后面的模块。如果你想用axios到1。x。你必须将JavaScript模块从ECMAScript类型转换为CommonJS类型。Jest基本上忽略/node_modules/目录进行转换。

所以你必须重写transformIgnorePatterns选项。有两种方法可以覆盖transformIgnorePatterns选项。

jest.config.js

那么如何使用config.js呢，你可以替换参数

transformIgnorePatterns: ['<rootDir>/node_modules/'],

transformIgnorePatterns: ["node_modules/(?!axios)"],

package.json

可以在包中添加设置。json文件

{
...other options
"jest": {
"preset": "your project",
"transformIgnorePatterns": ["node_modules/(?!axios)"]
}
}

替代解决方案

中的包。您可以为测试脚本指定一个参数"test" react-scripts test——transformIgnorePatterns "node_modules/(?!axios)/"，

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",
"eject": "react-scripts eject"
},