我的React项目的单元测试有问题,它被配置为使用webpack编译,但是当执行单元测试时,他们给了我这个错误:
语法错误:意外的标记“export”
这是我的jest.config.js
文件
const ignoreModulePatterns = ['query-string'].join('|');
const config = {
verbose: true,
testEnvironment: 'jsdom',
moduleDirectories: ['node_modules'],
coveragePathIgnorePatterns: ['/node_modules/'],
transformIgnorePatterns: [`/node_modules/(?!${ignoreModulePatterns}).+\\.js$`],
verbose: false,
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/__mocks__/file-mock.js',
'\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/style-mock.js',
'\\.(html)$': '<rootDir>/__mocks__/html-mock.js',
'^components(.*)$': '<rootDir>/src/components$1',
'^services(.*)$': '<rootDir>/src/api/services$1',
'^config(.*)$': '<rootDir>/src/config$1',
'^images(.*)$': '<rootDir>/src/images$1',
'^utils(.*)$': '<rootDir>/src/utils$1',
'^root(.*)$': '<rootDir>$1',
'^__mocks__(.*)$': '<rootDir>/__mocks__$1',
},
setupFilesAfterEnv: ['<rootDir>/__mocks__/setup-jest.js'],
};
module.exports = config;
这是我的babel.config.js
文件
module.exports = function (api) {
api.cache(true);
const presets = [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'@babel/preset-react',
];
const plugins = ['@loadable/babel-plugin'];
return {
presets,
plugins,
};
};
Este es mi archivo setup-jest.js
const matchers = require('jest-extended');
expect.extend(matchers);
afterEach(() => {
jest.useRealTimers();
});
这是我的setup-jest.js
文件
{
"exclude": ["node_modules", "build"],
"compilerOptions": {
"jsx": "react",
"baseUrl": ".",
"paths": {
"scss/*": ["./src/scss/*"],
"components/*": ["./src/components/*"],
"services/*": ["./src/services/*"],
"config/*": ["./src/config/*"],
"images/*": ["./src/images/*"],
"utils/*": ["./src/utils/*"]
}
}
}
在这里我也分享我的package.json
{
"name": "resume",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^1.4.0",
"dayjs": "^1.11.7",
"html-react-parser": "^3.0.16",
"i18next": "^22.4.15",
"prop-types": "^15.8.1",
"query-string": "^8.1.0",
"react": "^16.6.0",
"react-carousel-minimal": "^1.4.1",
"react-dom": "^16.6.0",
"react-i18next": "^12.2.0",
"react-image-gallery": "^1.2.11",
"react-router-dom": "^5.2.0",
"sass": "^1.62.1",
"uuid": "^9.0.0"
},
"scripts": {
"build": "webpack --mode production",
"start": "webpack serve --mode development --host 0.0.0.0",
"test": "jest --config=jest.config.js --no-cache --testResultsProcessor=\"jest-junit\"",
"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/eslint-parser": "^7.21.3",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@loadable/babel-plugin": "^5.15.3",
"babel-jest": "^29.5.0",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.1",
"interpolate-html-plugin": "^4.0.0",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"jest-extended": "^3.2.4",
"jest-junit": "^16.0.0",
"mini-css-extract-plugin": "^2.7.5",
"postcss-loader": "^7.2.4",
"postcss-preset-env": "^8.3.2",
"prettier": "^2.8.8",
"react-test-renderer": "^18.2.0",
"sass-loader": "^13.2.2",
"svg-inline-loader": "^0.8.2",
"url-loader": "^4.1.1",
"webpack": "^5.81.0",
"webpack-cli": "^5.0.2",
"webpack-dev-server": "^4.13.3"
},
"main": "index.html"
}
我看了很多文章和文档,但我不能解决它,我需要帮助:(
我希望我的单元测试运行时没有任何问题,或者至少是测试定义特定的问题,但是我遇到了这个错误:
SyntaxError: Unexpected token 'export'
> 1 | import queryString from 'query-string';
| ^
1条答案
按热度按时间dffbzjpn1#
尝试像这样使用require import: