JestがJSXを前処理していません

Question

Jest tutorialの反応コンポーネントをテストするために、私のjsxで前処理の問題が発生しています。私はエラーが前処理に起因すると仮定し、エラーメッセージはあまり役に立ちません。グーグルでは、私が知る限り、修正された/** @jsx React.DOM */のdocblockを含むことで修正された、古いバージョンの反応/ jestと同様のエラーが表示されます。

私は私のテストを実行します。

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は、その前処理に冗談を言って責任だと思いましたファイル？

"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

私はあなたは自分のpackage.jsonのjestセクションにtestFileExtensionsとtestFileExtensionsを追加する必要があるかもしれないと思います。私のためにそれを修正し、プロジェクトのルートディレクトリに.bablercファイルを使用して

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

Answer 2

：

はバベル-冗談のREADME.mdを参照してください。

webpack設定ファイルにプリセットを定義しているため、開発中に.babelrcファイルを使用していませんでした。しかし、あなたがjestを使って単体テストを実行すると、jestはwebpackについて知らないので、このプリセットを認識しません。したがって、プリセットを.babelrcファイルに追加するだけで問題が解決されます。 .babelrcの

内容：

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