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

Question

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

• 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() });

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

Answer 1

您需要测试文件由babel进行编译，因为它包含jsx 。 使用jsx需要导入React并由babel编译文件。

目前，您只可转换package.json以.tsx或.ts结尾的文件。 添加.js因为您的测试文件以.js结尾：

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

或者，将您的测试文件写入打字稿中，并使用.tsx作为文件结尾。

Answer 2

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

npx ts-jest config:init

这对我有用。