2

I'm building a React/Redux/ReactRouter/Jest boilerplate but I'm having an issue when testing a component with react-test-renderer.

I have put in place two kind of tests: unit tests for my redux actions and snapshot tests as a form of functional tests for my components.

First of all, my unit tests work perfectly. Here's one:

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

As you can see I'm using ES6 there (both in the test and in the tested action) and everything works fine.

The problem is when I try to test a component by creating it with react-test-renderer. Here's the broken test:

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

Here's what I get in the 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 |         }

And this is my .babelrc file (which is sitting in the root of my project folder):

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

And finally the packages.json file:

{
    "name": "vocabulary",
    "version": "0.1.0",
    "author": "Francesco Casula <[email protected]>",
    "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"
        ]
    }
}

By looking at the error it seems like babel may not be doing its magic? What I find weird though is that is transpiling correctly in the other tests (the action ones).

Hope you guys can help me figure this out :-)

2
  • Did adding the class-properties babel plugin work for you? Just ran into the exact same issue, even though the app will run fine with babel, just not with jest. Commented Apr 26, 2017 at 14:17
  • Yep I just ran npm install --save-dev babel-plugin-transform-class-properties and then I changed my .babelrc file accordingly and it worked. You can find the full working example here: github.com/fracasula/react-redux-jest-boilerplate Commented Apr 26, 2017 at 15:52

1 Answer 1

3

You will need the class-properties transform. Class properties are not yet in the ECMAScript spec but there are Babel plugins to allow this behavior.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.