在JEST测试中，浅表抛出意外的标记&lt；错误

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

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

我在包中按如下方式配置了JEST。json：

"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要求已导入Reaction，并且文件要由Babel传输。

目前，您只能按照package.json中的定义转换以.tsx或.ts结尾的文件。在.js测试文件结束时添加.js：

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

或者以TypeScript编写测试文件，并使用.tsx作为文件结尾。