在开玩笑测试酶.shallow 抛出意外令牌< 错误

IT技术 javascript reactjs typescript enzyme jestjs
2021-05-16 03:06:19

我目前正在使用以下堆栈设置单元测试:

  • react (v15) 组件是用 typescript (.tsx) 编写的
  • 测试设置是用 jest(v21) 和酶 (v3) 完成的
  • 测试文件被写成普通的 js 文件

不幸的是,酶似乎出了问题,因为我不断收到错误消息:

 wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
                             ^

SyntaxError: Unexpected token <

  at new Script (vm.js:51:7)
      at Generator.next (<anonymous>)
      at new Promise (<anonymous>)

Test Suites: 1 failed, 1 total

相应的测试文件如下所示:

var React = require('react');
var enzyme = require('enzyme');
var Stepper = require('./Stepper').default;

var wrapper;

describe('Stepper', () => {
  beforeEach(() => {
    wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
  });

  test('has bla', () => {
    expect(wrapper.contains('bla')).toBeTruthy();
  });
});

我在 package.json 中配置了 jest:

"jest": {
  "transform": {
    "^.+\\.(tsx|ts)$": "typescript-babel-jest"
  },
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "testMatch": [
    "<rootDir>/src/**/**/*.test.js"
  ],
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy"
  },
  "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
}

我的 setupTests.js 文件如下所示:

var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-15');

enzyme.configure({ adapter: new Adapter() });

我想不出可能导致问题的原因,有人知道解决方案吗?

2个回答

你需要你的测试文件被 babel 转译,因为它包含jsx. 使用 jsx 需要导入 React 并且需要 babel 转译文件。

此刻的你能做的只有transpile文件结尾.tsx.ts作为definded你package.json添加.js为您的测试文件结束于.js

  "transform": {
    "^.+\\.(tsx|ts|js)$": "typescript-babel-jest"
  },

或者用typescript编写测试文件并.tsx用作文件结尾。

首先安装 ts-jest 然后使用这个命令

npx ts-jest config:init

这对我有用。