Jest没有预处理我的JSX

Question

我正在按照Jest教程测试一个react组件,并且遇到了jsx的预处理问题.我假设错误是由于预处理,错误消息不是很有帮助.谷歌搜索显示与旧版本的react/jest相似的错误,这些错误是通过包含/** @jsx React.DOM */docblock来修复的,据我所知,docblock是固定的.

当我运行我的测试时:

Using Jest CLI v0.8.0, jasmine1
 FAIL  spec/MyComponent_spec.js
Runtime Error
SyntaxError: /Users/asdf/react/stuff-react/spec/MyComponent_spec.js: Unexpected token (13:6)
npm ERR! Test failed.  See above for more details.

有问题的行是应该渲染我的组件的行:

jest.dontMock('../src/MyComponent');

let React = require('react');
let ReactDOM = require('react-dom');
let TestUtils = require('react-addons-test-utils');

const MyComponent = require('../src/MyComponent');

describe('MyComponent', function(){
  it('render', function(){

    var myComponent = TestUtils.renderIntoDocument(
      // This is the line referenced in the test error
      <MyComponent />
    )
    var myComponentNode = ReactDOM.findDOMNode(myComponent);

    expect(myComponentNode.textContent).toEqual('hi');
  });
});

我以为我package.json负责告诉jest预处理该文件？

 "scripts": {
    "test": "jest"
  },
  "jest": {
    "testDirectoryName": "spec",
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  },

我的组件:

import React from 'react';

class MyComponent extends React.Component({
  render () {
    return (
      <div>
        hi
      </div>
    )
  }
});

export default MyComponent;

Answer 1

在项目根目录中使用.bablerc文件为我修复了它.

我在开发时没有使用.babelrc文件,因为我在webpack配置文件中定义了我的预设.但事实证明,当你用jest运行单元测试时,jest不知道这个预设,因为它不知道webpack.因此,简单地添加带有预设的.babelrc文件也可以为您解决问题.

.babelrc的内容:

{ "presets": ["es2015", "react"] }

Answer 2

我认为您可能只需要将testFileExtensions和添加testFileExtensions到jestpackage.json 的部分。

请参阅 babel-jest 的 README.md：

https://github.com/babel/babel-jest