Question

我无法在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”。

玩笑配置：

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)

Answer 1

好像您缺少babel-loader插件。

Answer 2

能够通过安装babel-jest并使用此.babelrc来解决问题：

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

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

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

  modulePaths: ['<rootDir>/src']

Jest无法运行.tsx文件（CRA 2，酶）

2 个答案: