2015-11-27 21 views
9

için ön işlem yapmıyor Bir tepkime bileşenini test etmek için Jest tutorial'u takip ediyorum ve jsx'imle ön işleme konularına giriyorum. Hatanın ön işlemeden kaynaklandığını farz ediyorum, hata mesajı çok yardımcı değil. Googling, tepkileri/hatayı düzeltmek için kullanabileceğimiz kadarıyla /** @jsx React.DOM */ doküman bloğu dahil edilerek düzeltilen eski tepki/jest sürümleriyle benzer hataları gösterir.Jest, JSX

benim testini çalıştırdığınızda: Söz konusu satır benim bileşeni render edilmelidir biridir

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

benim package.json preprocess için jest söylüyorum sorumlu olduğunu düşündüğünü dosya?

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

Benim bileşen:

import React from 'react'; 

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

export default MyComponent; 

cevap

1

Sadece senin package.json ait jest bölümüne testFileExtensions ve testFileExtensions eklemeniz gerekebilir düşünüyorum. Benim için sabit proje kök dizininde bir .bablerc dosyası kullanma

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

+0

sayesinde ben orada 'testFileExtensions' ve' moduleFileExtensions'with ES6 var, ama yine de burada benzer bir soru bulunan aynı hata – user2936314

+1

ile atar: http://stackoverflow.com/questions/28870296/how-to-use-jest-with-webpack - bu hiç yardımcı olmaz mı? –

4

:

babel-jest ait README.md bakınız.

Hazırlarken, webpack yapılandırma dosyasında hazır ayarlarımı tanımladığım için .babelrc dosyası kullanmıyordum. Ama ünite testini jestle çalıştırdığınızda, şutun webpack hakkında bilmediği için bu ön ayarların farkında olmadığı ortaya çıkıyor. Öyleyse, ön ayarlı bir .babelrc dosyası eklemek sorunu sizin için de çözmelidir. .babelrc ait

İçindekiler:

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

+0

Çok yardımcı bir cevap, beni delirtiyordu! Teşekkür ederim! – Y2H