使用Jest测试React应用程序:意外的令牌

时间:2017-04-18 14:17:10

标签: reactjs ecmascript-6 babeljs jestjs babel-jest

我正在建立一个 React / Redux / ReactRouter / Jest 样板文件,但我&#39 ; m在使用output2.to_csv("Place.csv", index = False) pd.options.display.mpl_style = 'default' place_plot=output2.plot(kind="bar",x=output2["Place"],title="Count",legend=False) fig = place_plot.get_figure() 测试组件时遇到问题。

我已经进行了两种测试:我的redux动作和快照测试的单元测试,作为我的组件的功能测试形式。

首先,我的单元测试工作完美。这是一个:

react-test-renderer

正如您所看到的那样,我在那里使用ES6(在测试和测试过程中都是如此),一切正常。

问题是当我尝试使用import mockStore from 'redux-mock-store'; import {fetchWordDefinitions} from '../src/actions'; describe('Async fetch of word definitions', () => { it('fetches a word definitions', async () => { const mockedResponse = [ {text: 'First definition'}, {text: 'Second definition'}, {text: 'Third definition'} ]; fetch.mockResponse(JSON.stringify(mockedResponse)); const store = mockStore({}); await store.dispatch(fetchWordDefinitions('whatever')); expect(store.getActions()).toEqual([ {type: 'ERROR', error: null}, {type: 'FETCHING', fetching: true}, { type: 'WORD_DEFINITIONS', word: 'whatever', definitions: [ "First definition", "Second definition", "Third definition" ] }, {type: 'FETCHING', fetching: false} ]); }); }); 创建组件来测试组件时。这是破碎的测试:

react-test-renderer

以下是我在CLI中获得的内容:

import React from 'react';
import {Provider} from 'react-redux';
import renderer from 'react-test-renderer';
import mockStore from 'redux-mock-store';
import Home from './../src/containers/Home';

test('test', () => {
    const store = mockStore({});

    const container = renderer.create(
        <Provider store={store}>
            <Home/>
        </Provider>
    );

    // some assertions - execution does not get here
});

这是我的 FAIL __tests__/Home.test.js ● Test suite failed to run /data/src/containers/Home.js: Unexpected token (8:11) 6 | 7 | class Home extends ReduxComponent { > 8 | search = (value) => { | ^ 9 | if (value !== this.status().selectedWord) { 10 | this.dispatch(fetchRelatedWords(value)); 11 | } 文件(位于我的项目文件夹的根目录中):

.babelrc

最后是{"presets": ["es2015", "react"]} 文件:

packages.json

通过观察错误,似乎巴贝尔可能没有做出它的魔力? 我觉得奇怪的是,在其他测试(行动的)中正确地进行了正确的转换。

希望你们能帮助我解决这个问题: - )

1 个答案:

答案 0 :(得分:3)

您需要class-properties transform。类属性尚未包含在ECMAScript规范中,但有Babel插件允许此行为。