Jest nicht vorverarbeitung meiner JSX

Question

Ich befolge die Jest tutorial, um eine reagierende Komponente zu testen und in Vorverarbeitungsprobleme mit meinem Jsx zu laufen. Ich nehme an, der Fehler ist auf Vorverarbeitung zurückzuführen, die Fehlermeldung ist nicht sehr hilfreich. Googeln zeigt ähnliche Fehler mit älteren Versionen von react/jest, die behoben wurden, indem der /** @jsx React.DOM */ Docblock eingeschlossen wurde, der, soweit ich feststellen kann, behoben wurde.

Als ich betreibe meine Test:

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. 

Die Linie in Frage die ist, die meine Komponente werden Rendering sollte:

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'); 
    }); 
}); 

Ich dachte, mein package.json für das Erklären Scherz Vorprozess verantwortlich war, dass Datei?

"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" 
    ] 
    }, 

Meine Komponente:

import React from 'react'; 

class MyComponent extends React.Component({ 
    render() { 
    return (
     <div> 
     hi 
     </div> 
    ) 
    } 
}); 

export default MyComponent; 

Answer 1

Ich glaube, Sie müssen nur den testFileExtensions hinzufügen und testFileExtensions zum jest Abschnitt Ihrer package.json.

Siehe README.md von babel-Scherz:

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

Answer 2

eine .bablerc Datei im Projektstammverzeichnis verwenden es für mich fixiert.

Ich habe während der Entwicklung keine .babelrc-Datei verwendet, weil ich meine Voreinstellungen in der Webpack-Konfigurationsdatei definiert habe. Aber es stellt sich heraus, dass, wenn Sie den Komponententest mit einem Scherz ausführen, der Scherz diese Presets nicht kennt, weil er nichts über das Webpack weiß. Wenn Sie einfach eine .babelrc-Datei mit den Voreinstellungen hinzufügen, sollte das Problem auch für Sie gelöst werden.

Inhalt von .babelrc:

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