我有一个React应用程序(不使用创建React应用程序)，使用TypeScript, Jest, Webpack和Babel构建。当试图运行纱线笑话时，我得到以下错误:
我已经尝试删除所有包并重新添加它们。它不能解决这个问题。我看过类似的问题和文档，但我仍然误解了一些东西。我甚至按照另一个指南从头开始设置这个环境，但我的代码仍然遇到了这个问题。
依赖关系包括……
"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，不管我怎么做，它都不会被笑话捡起来。主应用程序仍然使用.babelrc，因为它会覆盖babel.config.js文件。
安装jest, ts-jest和babel-jest:
npm i jest ts-jest babel-jest
Babel.config.js(仅用于开玩笑)
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"
还使用Babel, Typescript和Jest。同样的失败，让我抓狂了好几个小时。
最后专门为测试创建了一个新的babel.config.js文件。有一个很大的。babelrc，不管我怎么做，它都不会被笑话捡起来。主应用程序仍然使用.babelrc，因为它会覆盖babel.config.js文件。
安装jest, ts-jest和babel-jest:
npm i jest ts-jest babel-jest
Babel.config.js(仅用于开玩笑)
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"
对我来说，重命名文件为babel.config.js是有效的。
下面是我的NX项目配置文件，使用Typescript和twin -宏next
// .babelrc.js >> babel.config.js
module.exports = {
presets: [
[
"@nrwl/react/babel",
{
"runtime": "automatic",
"targets": {
"browsers": [">0.25%", "not dead"]
},
"preset-react": {
runtime: "automatic",
importSource: "@emotion/react",
},
}
],
'@babel/preset-env',
'@emotion/babel-preset-css-prop',
'@babel/preset-typescript'
],
plugins: ['@emotion', 'macros', '@babel/plugin-transform-runtime', 'react-docgen'],
}
另外，请注意甚至更新包。json的作品,
https://kulshekhar.github.io/ts-jest/docs/getting-started/presets/#basic-usage
// package.json
"jest": {
// Replace `ts-jest` with the preset you want to use
// from the above list
"preset": "ts-jest"
}
