关于打字稿：Jest无法运行.tsx文件(CRA 2，酶)

Jest fails to run .tsx files (CRA 2, enzyme)

我无法在ts CRA 2项目中使用" npm测试"，因为开玩笑无法处理.tsx。我遵循了此[设置指南](https://thetrevorharmon.com/blog/configuring-jest-and-enzyme-in-create-react-app-on-typescript)。

我正在尝试使用ts-jest来转换.tsx文件，但是它不起作用。

我发现，将tsconfig.json中的" jsx"选项从" preserve"更改为" react"将使笑话运行无错误。不幸的是，这与CRA 2打包的" npm run"脚本不兼容，因为它将jsx类型恢复为" preserve"。

开玩笑的配置：

1
2
3
4
5
6
7
8

module.exports = {
roots: ['<rootDir>/src'],
transform: {
'^.+\\\\.tsx?$': 'ts-jest',
},
testRegex: '(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

测试文件：

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{
"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错误消息结果将通过：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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之后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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-jest并使用此.babelrc能够解决此问题：

1
2
3

{
"presets":["@babel/preset-react","@babel/preset-env"]
}

Tets将成功运行，但是：绝对路径不适用于import语句。我想这可以通过其他一些配置解决。

编辑：通过将其添加到Jest配置中解决了导入问题：

1	modulePaths: ['<rootDir>/src']

好像您缺少babel-loader插件。