web-dev-qa-db-ja.com

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

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;
reactjsjestjs
15
user2936314

プロジェクトのルートディレクトリで.bablercファイルを使用すると、修正されました。

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

.babelrcの内容：

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

9
Saion Chatterjee

Package.jsonのtestFileExtensionsセクションにtestFileExtensionsとjestを追加するだけでよいと思います。

Babel-jestのREADME.mdを参照してください。

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

1
Matt Holland

Jestは.babelrcを無視するため、babel.config.js構成ファイルをbabel.config.jsonまたは.babelrcに変更するとうまくいきました。

0
protoEvangelion

私は同様の問題を抱えていました、そして解決策はこれをjest config fileに追加することでした：

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

プロジェクトで必要になった理由は、jest構成ファイルのデフォルトの"transform"値をオーバーライドしたためです。

0
Ofer Segev