Question

我正在关注Jest tutorial以测试反应组件，并且遇到了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的内容：

$aStartingArray = array(); $aSortedArray = array(); $aStartingArray[] = array('date'=>'2016-05-28', 'revenue' => 55); $aStartingArray[] = array('date'=>'2016-05-28', 'revenue' => 101); $aStartingArray[] = array('date'=>'2016-05-29', 'revenue' => 55); $aStartingArray[] = array('date'=>'2016-05-29', 'revenue' => 101); $aStartingArray[] = array('date'=>'2016-05-30', 'revenue' => 60); $aStartingArray[] = array('date'=>'2016-05-30', 'revenue' => 60); $aStartingArray[] = array('date'=>'2016-05-31', 'revenue' => 29); $aStartingArray[] = array('date'=>'2016-05-31', 'revenue' => 60); // loop through the initial array foreach ($aStartingArray as $aArray) { // set flag to reference if its been dealt with $bSet = false; // foreach of the sorted values, check if the date matches an entry foreach ($aSortedArray as $iPos => $aTempSortedArray) { if( $aTempSortedArray['date'] == $aArray['date'] ){ // match found, add revenue $aSortedArray[$iPos]['revenue'] += $aArray['revenue']; // set flag to illustrate a dealt with row $bSet = true; } } // if still hasnt been dealt with, go add it to the array if(!$bSet){ $aSortedArray[] = array( 'date' => $aArray['date'], 'revenue' => $aArray['revenue'] ); } } var_dump($aSortedArray);

Answer 2

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

请参阅babel-jest的README.md：

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

Answer 3

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

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

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

Answer 4

将我的.babelrc配置文件更改为babel.config.js或babel.config.json对我有用，因为Jest忽略了.babelrc。

Jest没有预处理我的JSX

4 个答案: