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

我正在构建一个 React / Redux / ReactRouter / Jest 样板，但是在使用 react-test-renderer 测试组件时遇到了问题 .

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

首先，我的单元测试工作完美 . 这是一个：

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

正如你所看到的那样我在那里使用ES6（在测试和测试过程中都是如此）并且一切正常 .

问题是当我尝试通过使用 react-test-renderer 创建组件来测试组件时 . 这是破损的测试：

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

这是我在CLI中得到的：

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 文件：

{
    "name": "vocabulary",
    "version": "0.1.0",
    "author": "Francesco Casula <fra.casula@gmail.com>",
    "license": "MIT",
    "private": false,
    "dependencies": {
        "prop-types": "^15.5.8",
        "react": "^15.5.4",
        "react-dom": "^15.5.4",
        "react-redux": "^5.0.4",
        "react-router": "^4.1.1",
        "react-router-dom": "^4.1.1",
        "redux": "^3.6.0",
        "redux-thunk": "^2.2.0"
    },
    "devDependencies": {
        "babel-jest": "^19.0.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "jest-fetch-mock": "^1.0.8",
        "react-scripts": "^0.9.5",
        "react-test-renderer": "^15.5.4",
        "redux-logger": "^3.0.1",
        "redux-mock-store": "^1.2.3",
        "regenerator-runtime": "^0.10.3"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "eject": "react-scripts eject",
        "test": "jest"
    },
    "jest": {
        "verbose": true,
        "setupFiles": [
            "./config/jest/setup.js"
        ]
    }
}

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

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