Jest not preprocessing my JSX

Question

I am following the Jest tutorial to test a react component and am running into preprocessing issues with my jsx. I assume the error is due to preprocessing, the error messag

Answer 1

I think you may just need to add the testFileExtensions and testFileExtensions to the jest section of your package.json.

See the README.md of babel-jest:

https://github.com/babel/babel-jest

Answer 2

Changing my .babelrc config file to babel.config.js or babel.config.json worked for me because Jest ignores .babelrc.

Answer 3

Using a .bablerc file in the project root directory fixed it for me.

I was not using a .babelrc file while developing because I defined my presets in the webpack configuration file. But it turns out that when you run the unit test with jest, then jest is not aware of this presets as it does not know about webpack. So simply adding a .babelrc file with the presets should solve the issue for you too.

Contents of .babelrc:

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

Answer 4

I had a similar problem, and the solution was adding this to jest config file:

"transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.jsx$": "babel-jest"  // This line was missing
}

The reason it was needed in our project, is because we overridden the default "transform" value in jest config file.