在开玩笑的测试中，shallow 抛出意外的 token < 错误

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

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

我已经没有什么可能导致这个问题的想法了，有人知道解决这个问题的方法吗？

你需要你的测试文件由 babel 转译，因为它包含jsx。使用 jsx 需要导入 React 并由 babel 转译该文件。

目前您只转译以以下结尾的文件.tsx or .ts正如你所定义的package.json. Add .js当你的测试文件结束时.js:

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

或者用打字稿编写测试文件并使用.tsx作为文件结尾。