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

Question

我正在构建一个 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"
        ]
    }
}

通过查看错误，似乎 babel 可能没有发挥它的魔力？不过我觉得奇怪的是它在其他测试（动作测试）中正确转译。

希望大家能帮我解决这个问题:-)

Answer 1

您将需要 class-properties transform。 Class ECMAScript 规范中还没有属性，但有 Babel 插件允许这种行为。

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

Testing React app with Jest: Unexpected token

ecmascript-6

reactjs

jestjs

babeljs

babel-jest