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 message is not very helpful. Googling shows similar errors with older versions of react/jest that were fixed by including the /** @jsx React.DOM */ docblock which as far as I can tell was fixed.

When I run my test:

Using Jest CLI v0.8.0, jasmine1
 FAIL  spec/MyComponent_spec.js
Runtime Error
SyntaxError: /Users/asdf/react/stuff-react/spec/MyComponent_spec.js: Unexpected token (13:6)
npm ERR! Test failed.  See above for more details.

The line in question is the one that should be rendering my component:

jest.dontMock('../src/MyComponent');

let React = require('react');
let ReactDOM = require('react-dom');
let TestUtils = require('react-addons-test-utils');

const MyComponent = require('../src/MyComponent');

describe('MyComponent', function(){
  it('render', function(){

    var myComponent = TestUtils.renderIntoDocument(
      // This is the line referenced in the test error
      <MyComponent />
    )
    var myComponentNode = ReactDOM.findDOMNode(myComponent);

    expect(myComponentNode.textContent).toEqual('hi');
  });
});

I thought my package.json was responsible for telling jest to preprocess that file?

 "scripts": {
    "test": "jest"
  },
  "jest": {
    "testDirectoryName": "spec",
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  },

My component:

import React from 'react';

class MyComponent extends React.Component({
  render () {
    return (
      <div>
        hi
      </div>
    )
  }
});

export default MyComponent;

score 12 · Answer 1 · answered Jun 07 '16 at 13:38

12

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

answered Jun 07 '16 at 13:38

Saion Chatterjee

136
1
5

Very helpful answer, it was driving me crazy! Thank you! – Y2H Oct 22 '17 at 10:13
can we define a custom babel config on jest configs ? because in my case I can't use `.babelrc` for multi build reason – Tamsamani Dec 21 '21 at 11:37

score 2 · Answer 2 · answered Mar 24 '20 at 16:10

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.

score 1 · Answer 3 · answered Nov 28 '15 at 01:06

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

answered Nov 28 '15 at 01:06

Matt Holland

2,190
3
22
26

thanks, i do have `testFileExtensions` and `moduleFileExtensions`with es6 in there, but it still throws with the same error – user2936314 Nov 28 '15 at 04:31
1

I found a similar question here: http://stackoverflow.com/questions/28870296/how-to-use-jest-with-webpack - does that help at all? – Matt Holland Nov 30 '15 at 19:55

score 0 · Answer 4 · answered Jan 30 '20 at 20:00

0

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

answered Jan 30 '20 at 20:00

protoEvangelion

4,355
2
29
38

I just added a `.babelrc` and found your statement to be untrue in that it changed the behavior of a jest command I had been running. – papiro Mar 12 '20 at 00:03
Depends on the version of Jest you are running. – protoEvangelion Mar 17 '20 at 21:57
Can you post in your answer which versions of Jest ignore the babelrc? – papiro Mar 17 '20 at 22:04
I'm not sure which versions ignore it. But for sure v 24.x ignores it. – protoEvangelion Mar 17 '20 at 22:44

score 0 · Answer 5 · answered Aug 16 '22 at 18:29

Add ["@babel/preset-react", { runtime: "automatic" }] to the presets in babel.config.js.

Your babel.config.js file should look something like:

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

And you need to set your jest environment to jsdom by adding this to the top of your test (make sure you've installed the jest-environment-jsdom node package):

/**
 * @jest-environment jsdom
 */

Jest not preprocessing my JSX

5 Answers5

Linked