Testing React app with Jest: Unexpected token

Question

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 <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"
        ]
    }
}

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 :-)

Answer 1

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.