问题描述
当前,我正在尝试对一些React组件进行单元测试,但是在导入React模块时遇到了问题。
我遇到的错误如下
C:\Users\Andrew.Urry\source\Workspaces\Empower\PlatformAdmin\Portal\node_modules\mpx-error-boundary\ErrorBoundary.js:2
import * as React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
6 | import { PageHeader } from './SubMenu';
7 | import { msg } from 'mpx-multi-language';
> 8 | import { ErrorBoundary } from 'mpx-error-boundary';
jest.config.js文件如下:
module.exports = {
"roots": [
"<rootDir>/wwwroot/ts-tests"
],"testMatch": [
"**/__tests__/**/*.+(ts|tsx|js)","**/?(*.)+(spec|test).+(ts|tsx|js)"
],"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
},}
package.json文件如下:
{
"name": "app","version": "1.0.0","private": true,"devDependencies": {
"@babel/cli": "^7.8.4","@babel/core": "^7.9.0","@babel/node": "^7.8.7","@babel/preset-env": "^7.9.0","@babel/preset-react": "^7.10.1","@babel/preset-typescript": "^7.9.0","@babel/plugin-proposal-class-properties": "^7.10.4","@babel/plugin-transform-modules-commonjs": "^7.10.4","@babel/register": "^7.9.0","@types/bootstrap": "4.3.2","@types/chai": "^4.2.0","@types/enzyme-adapter-react-16": "^1.0.6","@types/jquery": "^3.5.0","@types/mocha": "^7.0.2","@types/react": "^16.9.31","@types/react-dom": "^16.9.6","@types/sinon": "^9.0.4","@types/jest": "26.0.10","babel-loader": "^8.1.0","chai": "^4.2.0","clean-webpack-plugin": "^3.0.0","css-loader": "^3.6.0","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.2","esm": "3.2.25","file-loader": "^6.0.0","hard-source-webpack-plugin": "^0.13.1","html-webpack-plugin": "^4.3.0","image-webpack-loader": "^6.0.0","jsdom": "^16.3.0","mini-css-extract-plugin": "^0.9.0","mocha": "^8.1.1","node-sass": "^4.14.1","optimize-css-assets-webpack-plugin": "^5.0.3","sinon": "^9.0.2","sinon-chai": "3.5.0","terser-webpack-plugin": "^3.0.6","ts-loader": "^7.0.5","ts-mockito": "^2.5.0","ts-jest": "26.2.0","typescript": "3.8.3","webpack": "^4.43.0","webpack-cli": "^3.3.12","ignore-styles": "^5.0.1","ts-node-register": "1.0.0","jest": "26.4.0"
},"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.1","@material-ui/core": "^4.11.0","bootstrap": "^4.3.1","bootstrap-table": "^1.16.0","file-saver": "^2.0.2","jquery": "^3.3.1","jquery-validation": "^1.17.0","jquery-validation-unobtrusive": "^3.2.11","material-table": "^1.68.0","moment": "^2.26.0","mpx-dialog": "^1.1.12","mpx-error-boundary": "^1.0.0","mpx-multi-language": "^1.0.8","mpx-react-page-components": "^1.0.6","mpx-utilities": "^1.0.1","react": "^16.13.1","react-dom": "^16.13.1","tableexport.jquery.plugin": "^1.10.20"
},"babel": {
"presets": [
"@babel/preset-env","@babel/preset-react","@babel/preset-typescript"
],"plugins": [
"@babel/plugin-proposal-class-properties","@babel/plugin-transform-modules-commonjs"
],"transformIgnorePatterns": [
"node_modules/mpx-error-boundary/"
]
},"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},"transform": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
}
},"mocha": {
"extension": [
"ts","tsx"
],"spec": "wwwroot/ts-tests/**/*.test.tsx","require": [
"wwwroot/ts-tests/babel-register.js","ignore-styles"
]
},"scripts": {
"test": "jest","pack-dev": "webpack --mode development --progress","pack-dev-profile": "webpack --mode development --verbose --profile --progress","pack-prod": "webpack --mode production","pack-library": "webpack --mode production --config webpack.library.config.js","clean": "del /Q /F .\\wwwroot\\dist\\*.*"
}
}
babel-register.js文件如下:
/* Copyright (©) Metapraxis Ltd,2020 - 2020,all rights reserved */
// This cannot be done on the command line or in package.json due to this issue:
// https://github.com/babel/babel/issues/8962
const register = require('@babel/register').default;
register({
extensions: ['.ts','.tsx','.js','.jsx']
});
tsconfig.json如下:
{
"compileOnSave": false,"compilerOptions": {
"noImplicitAny": false,"noEmitOnError": true,"removeComments": false,"sourceMap": true,"allowUmdGlobalAccess": true,"target": "ES6","module": "ES6","moduleResolution": "Node","jsx": "react","allowSyntheticDefaultImports": true,"esModuleInterop": true
},"exclude": [
"node_modules"
],"include": [
"./../Abstractions/*.d.ts","./../Abstractions/**/*.d.ts","./Models/*.d.ts","./wwwroot/ts/*","./wwwroot/ts-tests/**/*.test.ts","./wwwroot/ts-tests/**/*.test.tsx"
]
}
我认为这是导入样式之间不匹配的问题,但我无法解决该问题。 package.json包含 mocha ,但当前正在使用 jest 进行测试。 mocha 和 jest 都遇到了相同的问题,因此它必须独立于测试框架。
对此事的任何帮助将不胜感激
编辑#1:它抱怨的导入文件存在于外部NPM软件包中
编辑#2:我认为该问题与babel无法将ES6模块转换为ES5进行测试
解决方法
transformIgnorePatterns
中所述的package.json
可能使问题更加严峻。尝试以下技巧,看看是否能解决您的问题。
"transformIgnorePatterns": [
"node_modules/(?!(react|mpx-error-boundary)/)"
]