Question:

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

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

<h2>Install babel-jest</h2> yarn add babel-jest --dev <h2>Configure .babelrc for test env</h2>

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" ] } } } <h2>Add jest.congfig.json to project root</h2> { "transform": { "^.+\\.jsx?$": "babel-jest" } } <h2>Finally, let your test script know where to find config file</h2>

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

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.