【发布时间】：2021-08-25 09:15:39
【问题描述】：
我正在尝试在我的 React 应用程序中使用 Jest 框架来实现前端单元测试。使用npm test 执行测试时出现以下错误：
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:
C:\codebase\Sprint 57\unit-testing\GiF\src\frontend\node_modules\antd\es\locale\zh_CN.js:2
import Pagination from "rc-pagination/es/locale/zh_CN";
^^^^^^
SyntaxError: Cannot use import statement outside a module
6 | import enUS from './en-US.js'
7 | import zhCN from './zh-CN.js'
> 8 | import zh_CN from 'antd/es/locale/zh_CN'
| ^
9 |
10 | function loadLang() {
11 | let _lang = Cookies.get('_lang') || 'zh-CN'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
at Object.<anonymous> (src/locales/lang.js:8:1)
请在下面查看我的文件。
package.json
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/compatible": "^1.0.2",
"@ant-design/icons": "^4.0.6",
"@babel/preset-react": "^7.14.5",
"antd": "4.1.5",
"axios": "^0.19.2",
"dva": "^2.6.0-beta.20",
"echarts": "^4.7.0",
"highcharts": "^8.1.0",
"html2canvas": "^1.0.0-rc.7",
"jest": "^27.0.6",
"jest-transform-stub": "^2.0.0",
"jquery": "^3.5.1",
"js-base64": "^2.5.2",
"js-cookie": "^2.2.1",
"jspdf": "^2.3.0",
"leaflet": "^1.6.0",
"leaflet-ant-path": "^1.3.0",
"leaflet-groupedlayercontrol": "^0.6.1",
"leaflet-openweathermap": "^1.0.0",
"leaflet-search": "^2.9.8",
"leaflet.markercluster": "^1.4.1",
"lodash": "^4.17.15",
"moment": "^2.25.3",
"prop-types": "^15.7.2",
"qs": "^6.9.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader-loader": "0.0.7",
"react-intl": "^4.5.1",
"react-test-renderer": "^17.0.2",
"video.js": "^7.8.4",
"videojs-flash": "^2.2.1"
},
"devDependencies": {
"@babel/core": "7.6.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@svgr/webpack": "4.3.2",
"babel-eslint": "10.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "8.0.6",
"babel-plugin-import": "^1.13.0",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "3.5.3",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"echarts": "^4.4.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react-app-polyfill": "^1.0.3",
"react-dev-utils": "^9.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.40.2",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app",
"rules": {
"jsx-a11y/href-no-hash": 0,
"jsx-a11y/anchor-is-valid": 0
}
},
"browserslist": {
"production": [
"ie 11",
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
jest.config.js
module.exports = {
testEnvironment: "node",
roots: [
"<rootDir>/src"
],
collectCoverage: false,
collectCoverageFrom: [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
testMatch: [
"<rootDir>/src/**/*.test.js"
],
transform: {
"^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
"^.+\\.(css|less)$": "<rootDir>/config/jest/cssTransform.js",
".+\\.(css|styl|less|sass|scss|png|svg|jpg|ttf|woff|woff2)$": "jest-transform-stub"
},
transformIgnorePatterns: [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss|less)$",
"/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx|ts|tsx)$"
]
}
babel.config.js
module.exports = {
presets: ['@babel/preset-env', "@babel/preset-react"],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-class-properties"
],
};
测试文件（Help.test.js）
import { expect } from '@jest/globals';
import renderer from 'react-test-renderer'
import Help from './Help'
//import Menu from './../menu/LeftMenu'
test('Initial test for help', () => {
//const component = renderer.create(Menu)
//let tree = component.toJSON()
//expect(tree).toMatchSnapshot()
expect('').toMatch('')
})
test('It runs a test', () => {
expect(true).toBe(true)
})
【问题讨论】：
标签： reactjs unit-testing jestjs antd