Jest not parsing es6: SyntaxError: Unexpected token import

Question

I am trying to setup Jest with my webpack project. When I run my tests, Jest complains it cannot read es6 code. Babel seems to not transform my test files.

I have tried

Answer 1

I ran into a similar situation where I wanted to test a React component .js file with jest, but it was failing because the component imported a .css stylesheet. I was using Babel with Webpack.

As per the accepted answer @sdgluck, I had to add a babel.config.js:

1.

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

2. I also installed babel-jest as a dev-dependency

3. Then I read through the jest webpack guide

4. Which led me to adding a "jest" property to my package.json which mocks files and stylesheets:

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
      "\\.(css|less)$": "/__mocks__/styleMock.js"
    }
  }

5. Then I had to create the mocked files at the specified paths (you can use any path you want, those are just from their docs):

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

Then it worked :)