Testing React app with Jest: Unexpected token - reactjs

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.