Question

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

react（v15）组件使用typescript（.tsx）
用jest（v21）和酶（v3）
测试文件写为普通的js-files

不幸的是，由于我不断出现错误，酶似乎出现了问题：

 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转换文件。

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

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

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

在jest测试中，酶.hallow抛出意外的令牌＆lt;错误

1 个答案: