typescript - Jest 无法运行 .tsx 文件(CRA 2,酶)
问题描述
我无法在我的 ts CRA 2 项目中使用“npm test”,因为 jest 无法处理 .tsx。我遵循了这个 [设置指南] ( https://thetrevorharmon.com/blog/configuring-jest-and-enzyme-in-create-react-app-on-typescript )。
我正在尝试使用 ts-jest 来转换 .tsx 文件,但它不起作用。
我发现将 tsconfig.json 中的“jsx”选项从“preserve”更改为“react”将允许 jest 无错误地运行。不幸的是,这与 CRA 2 打包的“npm run”脚本不兼容,因为它会将 jsx 类型恢复为“preserve”。
开玩笑的配置:
module.exports = {
roots: ['<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
测试文件:
import React from 'react';
import { shallow } from 'enzyme';
import AboutPage from 'pages/AboutPage';
describe('MyComponent', () => {
it('should render correctly with no props', () => {
const component = shallow(<AboutPage />);
expect(component).toMatchSnapshot();
});
});
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"baseUrl": "./src"
},
"include": [
"src"
]
}
所有测试都应该通过,但会出现以下 Jest 错误消息结果:
FAIL src/__tests__/AboutPage.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not p
lain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "nod
e_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgn
orePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out wit
h the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/josh/Repos/welfare-react-capacitor/src/__tests__/AboutPage.test.tsx:11
var component = enzyme_1.shallow(<AboutPage_1.default />);
^
SyntaxError: Unexpected token <
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransf
ormer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25
)
添加 babel-jest 后:
SyntaxError: /Users/josh/Repos/welfare-react-capacitor/src/__tests__/AboutPage.test.tsx: Unexpec
ted token (7:30)
5 | describe('MyComponent', () => {
6 | it('should render correctly with no props', () => {
> 7 | const component = shallow(<AboutPage />);
| ^
8 |
9 | expect(component).toMatchSnapshot();
10 | });
at Parser.raise (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6344:17)
at Parser.unexpected (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7659:16
)
at Parser.parseExprAtom (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8828
:20)
at Parser.parseExprSubscripts (node_modules/@babel/core/node_modules/@babel/parser/lib/index.j
s:8413:23)
at Parser.parseMaybeUnary (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:83
93:21)
at Parser.parseExprOps (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8280:
23)
at Parser.parseMaybeConditional (node_modules/@babel/core/node_modules/@babel/parser/lib/index
.js:8253:23)
at Parser.parseMaybeAssign (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8
200:21)
at Parser.parseExprListItem (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:
9475:18)
at Parser.parseCallExpressionArguments (node_modules/@babel/core/node_modules/@babel/parser/li
b/index.js:8620:22)
解决方案
看起来你缺少babel-loader
插件。
推荐阅读
- android - 禁用汉堡图标到箭头过渡动画片段
- javascript - 如何检测该页面已重新加载 Reactjs?
- jess - 比较嵌套 Java bean 的值
- sql-server - ExecuteReader 比 SSMS 慢得多
- html - 创建带有切碎透明角的按钮
- html - Using a ngx-smart-modal, how to only evaluate modal content, when it is shown
- c++ - 使用 Effective C++ 使用模板重载等于运算符
- react-native - 如何在不打开电话拨号器或要求选择通话应用程序的情况下从 react native 拨打电话
- python - pyodbc InterfaceError: sqlalchemy.create_engine(mssql+pyodbc://...)
- oracle - Re-write to_char function