我只是没有预处理我的 JSX

Question

我正在按照 Jest 教程 来测试 React 组件，但我的 jsx 遇到了预处理问题。我认为错误是由于预处理造成的，错误消息不是很有帮助。谷歌搜索显示旧版本的 React/jest 存在类似错误，这些错误通过包含

/** @jsx React.DOM */

文档块来修复，据我所知，该文档块已修复。

当我运行测试时：

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

使用项目根目录中的 .babelrc 文件为我解决了这个问题。

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

.babelrc 的内容：

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

Answer 2

我遇到了类似的问题，解决方案是将其添加到jest配置文件：

"transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.jsx$": "babel-jest"  // This line was missing
}

我们的项目需要它的原因是因为我们覆盖了 jest 配置文件中的默认

"transform"

值。

Answer 3

我认为您可能只需将

testFileExtensions

和

testFileExtensions

添加到 package.json 的

jest

部分。

参见 babel-jest 的 README.md：

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

Answer 4

将我的

.babelrc

配置文件更改为

babel.config.js

或

babel.config.json

对我有用，因为Jest忽略了

.babelrc

。

Answer 5

将

["@babel/preset-react", { runtime: "automatic" }]

添加到

babel.config.js

中的预设。

您的

babel.config.js

文件应类似于：

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

您需要将 jest 环境设置为

jsdom

，方法是将其添加到测试顶部（确保您已安装

jest-environment-jsdom

节点包）：

/**
 * @jest-environment jsdom
 */