Test with enzyme: Unexpected token in mount()

Question

I'm trying to make enzyme tests in react.

I make this simple test that mount a import component and check the states:

import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';

import WorkOutForm  from './workOutForm';

describe('<WorkOutForm>', () => {
    describe('workoutForm component', () => {
      it('should start a new workoutForm with empty state', () => {
        const component = mount(<WorkOutForm />);

        expect(component).toEqual({})
        expect(component.state().tempoGasto).toEqual(null)
        expect(component.state().tipoAtividade).toEqual(null)
        expect(component.state().data).toEqual(null)
        component.unmount()
      })
    })
})

But when i run npm run test i get:

Jest encountered an unexpected token const component = mount()

I try to make like the doc but i can't see my error.

Obs: i follow the jest getting started and i run:

npm i --save babel-jest @babel/core @babel/preset-env --dev

i added a babel.config.js file in the root with this content:

module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
    ],
  };

and this is my webpack:

    module: {
        loaders: [{
            test: /.js[x]?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react', '@babel/preset-env'],
                plugins: ['transform-object-rest-spread']
            }
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        }, {
            test: /\.woff|.woff2|.ttf|.eot|.svg*.*$/,
            loader: 'file'
        },



    ]
}

Can you try const component = mount(<div>Hello world</div>) to check if the problem is in WorkOutForm component. — Clark
Same error. i think is something about babel. I receive this too: at Parser.raise (node_modules/@babel/parser/lib/index.js:6325:17) at Parser.unexpected (node_modules/@babel/parser/lib/index.js:7642:16) at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:8841:20) at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:8412:23) at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:8392:21) — yobaxeb
If you are using Jest, why are you loading expect from chai? — David Bradshaw

Vishal Sharma Vishal Sharma · Accepted Answer · 2020-06-17T16:01:03

Please try adding the following in your package.json jest config:

"transform": {
  "\\.js$": "<rootDir>/node_modules/babel-jest"
},

Make sure you install the babel-jest package first

Test with enzyme: Unexpected token in mount()

1 Answers