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

Posted 2023-02-22

【中文标题】用 Jest 测试 React 应用程序：意外的令牌

【英文标题】：Testing React app with Jest: Unexpected token

【发布时间】：2017-09-14 10:39:42

【问题描述】：

我正在构建一个 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 <[e-mail]>",
    "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 可能没有发挥它的魔力？ 我觉得奇怪的是，它在其他测试（动作测试）中正确转换。

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

【问题讨论】：

添加 class-properties babel 插件对你有用吗？刚刚遇到了完全相同的问题，即使应用程序可以使用 babel 运行良好，只是不能使用 jest。

是的，我刚刚运行了npm install --save-dev babel-plugin-transform-class-properties，然后我相应地更改了我的.babelrc 文件并且它起作用了。您可以在此处找到完整的工作示例：github.com/fracasula/react-redux-jest-boilerplate

【参考方案1】：

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