目前，我正在尝试对一些react组件进行单元测试，但在导入react模块时遇到了问题。
我遇到的错误是以下
C:UsersAndrew.UrrysourceWorkspacesEmpowerPlatformAdminPortalnode_modulesmpx-error-boundaryErrorBoundary.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进行测试有关
问题可能与package.json中所述的transformIgnorePatterns有关。试试下面的技巧，看看它是否能解决你的问题。
"transformIgnorePatterns": [
"node_modules/(?!(react|mpx-error-boundary)/)"
]