Jest non sta eseguendo il pre-elaborazione del mio JSX

Question

Sto seguendo lo Jest tutorial per testare un componente di risposta e sto correndo in problemi di pre-elaborazione con il mio jsx. Presumo che l'errore sia dovuto alla pre-elaborazione, il messaggio di errore non è molto utile. Googling mostra errori simili con versioni precedenti di react/jest che sono stati risolti includendo il docblock /** @jsx React.DOM */ che per quanto posso dire è stato corretto.

Quando eseguo la mia prova:

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. 

La linea in questione è quello che dovrebbe essere il rendering mia componente:

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

ho pensato che la mia package.json era responsabile per aver detto per scherzo a pre-elaborazione che file?

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

La mia componente:

import React from 'react'; 

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

export default MyComponent; 

Answer 1

penso che si può solo bisogno di aggiungere il testFileExtensions e testFileExtensions alla sezione jest del package.json.

Vedi l'README.md di babele-scherzo:

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

Answer 2

utilizzo di un file .bablerc nella directory principale del progetto fissata per me.

Non stavo usando un file .babelrc durante lo sviluppo perché ho definito i miei preset nel file di configurazione del webpack. Ma si scopre che quando si esegue l'unit test con jest, quindi jest non è a conoscenza di questi preset in quanto non conosce il webpack. Quindi semplicemente aggiungere un file .babelrc con i preset dovrebbe risolvere il problema anche per te.

Contenuto del .babelrc:

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