CODEWITHSUNDEEP
reactjstestingbabeljsjestjs
Jordan Hensley
Jordan Hensley

Reputation: 440

Babel will not compile .test.js files while running Jest

While running yarn run jest --no-cache, An error is being thrown that says:

SyntaxError: Unexpected token import

My best guess is that babel is not reaching this this test file. Is their something special I need to include in .babelrc?

path:

/src/tests/LandingPage.test.js

test file:

import React from 'react';
import ReactShallowRenderer from 'react-test-renderer/shallow';
import LandingPage from '../../components/LandingPage';

test('Should render LandingPage correctly', () => {
  const renderer = new ReactShallowRenderer();
  renderer.render(<LandingPage />);
  expect(renderer.getRenderOutput()).toMatchSnapshot();
});

.babelrc :

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

Upvotes: 4

Views: 7577

Answers (3)

Bence Szalai
Bence Szalai

Reputation: 922

For anyone looking for solutions, in my case the problem turned out that I had my NODE_ENV environment variable configured to development for some reason.

Now JEST only sets the env to test if NODE_ENV is not defined yet, otherwise it'll use the value of NODE_ENV. This means if you have added in your .babelrc or babel.config file a dedicated part for the test (something like below), it will be ignored,and defaults (or the one matching your NODE_ENV) will be used instead!

{
...
  "env": {
    "test": { presets: [ "@babel/preset-env" ] }
  }
...
}

So if it looks like JEST does not transform your test files (which one of a sign can be a SyntaxError: Cannot use import statement outside a module when running tests reated to your test.js or spec.js file) I'd recommend to check if you have NODE_ENV defined. Use the env command (on MacOS and Linux or the appropriate command for your environment) to check the configured environment variables. If you have it already configured to something (other than test) you need to either remove that or prepend your jest commands with appropriate override: env NODE_ENV=test jest.

I hope it'll help others. Took me good few hours to figure out what was going on...

Upvotes: 2

Jordan Hensley
Jordan Hensley

Reputation: 440

Thanks @hannad rehmann for the nudge in the right direction here is the solution that worked for me.

Install babel-jest

yarn add babel-jest --dev

Configure .babelrc for test env

Jest automatically sets your Env to test, so duplicate whatever config you want to the test env.

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
        ],
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
      ]
    }
  }
}

Add jest.config.json to project root

{
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

Finally, let your test script know where to find config file

I just added it to my test script in package.json, but you can also just run this in the command line.

"scripts": {
    "test": "jest --config=jest.config.json --watch"
},

Upvotes: 6

hannad rehman
hannad rehman

Reputation: 4341

oh. this issue had me waste so many days. here is what you need to do. before that check these files.

1) .babelrc install corresponding modules and add them to package.json define different env support as your jest always changes NODE_ENV to "test"

{
  "presets": [
    [
      "env",
      { "modules": false }],
    "react"
    ],
    "plugins": [
      "react-hot-loader/babel",
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ],
  "env":{
    "test":{
      "presets": [
        "env",
        "react"
    ],
    "plugins": [
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ]}
  }
}

2) add this to your package.json

 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "automock": false,
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/"
    ],
    "transformIgnorePatterns": [
      "/node_modules/"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "modulePathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ]
     }

What I understood about this problem is that Jest will change your NODE_ENV to "test" and Babel doesn't have any configuration for this env, we normally define Babel config for development and production env. When there is no babel transpilation, import keyword actually becomes undefined as it actually doesn't exist in JS context.

Upvotes: 3

Related Questions