我有一个使用 TypeScript、Jest、Webpack 和 Babel 构建的 React 应用程序(不使用 Create React App)。尝试运行 yarn jest
时,出现以下错误:
我尝试删除所有包并重新添加它们。它不能解决这个问题。我看过类似的问题和文档,但我仍然不明白。我竟然按照另一个指南从头开始设置这个环境,但我的代码仍然遇到这个问题。
依赖项包括...
"dependencies": {
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/polyfill": "^7.6.0",
"babel-jest": "^24.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.11.0",
"source-map-loader": "^0.2.4"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/preset-react": "^7.0.0",
"@types/enzyme": "^3.9.2",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.13",
组件的导入行...
import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
Footer,
Header,
Navigation,
} from "./components/shared";
测试文件....
import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";
it("Renders the Footer correctly", () => {
const tree = renderer
.create(<App />)
.toJSON();
expect(tree).toMatchSnapshot();
});
我希望能够在我的组件中使用命名导入,而不会导致我的测试崩溃。如果我在整个解决方案中仅使用默认导入,似乎可以解决该问题,但我宁愿不走这条路。
最佳答案
我也遇到了同样的失败(也使用 Babel、Typescript 和 Jest),这让我发疯了好几个小时!
最终创建了一个专门用于测试的新的 babel.config.js
文件。我有一个很大的 .babelrc ,无论我对它做什么,它都不会被 Jest 拾取。主应用程序仍然使用 .babelrc
,因为它会覆盖 babel.config.js
文件。
我采取的步骤:
安装 jest
、ts-jest
、babel-jest
和 @babel/preset-env
:
npm i jest ts-jest babel-jest @babel/preset-env
添加babel.config.js
(仅由jest使用)
module.exports = {presets: ['@babel/preset-env']}
在jest.config.js
中更新为:
module.exports = {
preset: 'ts-jest',
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
'^.+\\.(js|jsx)$": "babel-jest',
}
};
package.json
"scripts": {
"test": "jest"
关于reactjs - 运行测试时如何解析 Jest 中的 "Cannot use import statement outside a module"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58613492/