Jestチュートリアル に従ってreactコンポーネントをテストし、jsxで前処理の問題が発生しています。エラーは前処理によるものだと思いますが、エラーメッセージはあまり役に立ちません。グーグルは、私が知る限り修正された/** @jsx React.DOM */
docblockを含めることで修正された、古いバージョンのreact/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
は、そのファイルを前処理するように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;
プロジェクトのルートディレクトリで.bablercファイルを使用すると、修正されました。
Webpack構成ファイルでプリセットを定義したため、開発中に.babelrcファイルを使用していませんでした。しかし、jestを使用して単体テストを実行すると、jestはwebpackを認識しないため、このプリセットを認識しません。したがって、プリセットを含む.babelrcファイルを追加するだけで、問題も解決するはずです。
.babelrcの内容:
{ "presets": ["es2015", "react"] }
Package.jsonのtestFileExtensions
セクションにtestFileExtensions
とjest
を追加するだけでよいと思います。
Babel-jestのREADME.mdを参照してください。
Jestは.babelrc
を無視するため、babel.config.js
構成ファイルをbabel.config.json
または.babelrc
に変更するとうまくいきました。
私は同様の問題を抱えていました、そして解決策はこれをjest config fileに追加することでした:
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.jsx$": "babel-jest" // This line was missing
}
プロジェクトで必要になった理由は、jest構成ファイルのデフォルトの"transform"
値をオーバーライドしたためです。