reactjs - 开 Jest ，没有预处理我的 JSX

Question

我正在关注Jest tutorial测试一个 React 组件，我的 jsx 遇到了预处理问题。我认为错误是由于预处理造成的，错误消息不是很有帮助。谷歌搜索显示旧版本的react/jest存在类似的错误，这些错误通过包含 /** @jsx React.DOM */ 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 的内容:

{ “预设”:[“es2015”，“ react ”] }