36430

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

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

Answer1:

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

Answer2:

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.

Recommend

  • Fullscreen video that allows scrolling
  • How to use a find_by_sql query for an ActiveAdmin index page?
  • Creating Playlist via code
  • Copy a section within two keywords into a target file
  • Combining two subgroups of data in the same dataframe
  • IIS Session timeout and Forms Authentication loop
  • What causes erratic GPS estimates during certain time intervals?
  • GD error while try load font
  • How do I run a shell command inside a rake task as administrator?
  • pySerial data received from XBee not properly displayed
  • Glassfish/Wildfly not failing if @Resource cannot be resolved?
  • Unable to authenticate with omniauth-instagram, client_id missing
  • Taking input from user and returning an answer in TKinter
  • Shell environment variables in vagrant files are only passed on first up
  • Injecting content via Grunt task, depending on asp.net project build configuration
  • Channel mix with Pillow
  • Pipe in for loop breaks double quoted variables
  • Writing an RDA to CSV in R
  • Use object spread operator to construct function object with fields
  • MongoError: getaddrinfo ENOTFOUND undefined undefined:27017
  • Convert a 12 hour time format to 24 hour time format (keeping record of the day) in python
  • springboot + webpack dev server, does not change localhost bundle file after rebuilding
  • How can I selectively modify the src attributes of script tags in an HTML document using Perl?
  • how to calculate distance between two points in google maps?
  • Put percent labels next to legend instead of in the slice
  • HABTM associations in Rails : collecting and counting the categories of a model's children
  • Rails 4.1 environment variables not reloading
  • How to create a custom Powershell operator?
  • Guava how to copy all files from one directory to another
  • OSX - always hide certain files
  • Compiling dlib on OS X
  • How to generate and display a QR Code in ionic 2
  • Button text different than value submitted in query string
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • How to get a value (ex: baseURL) in every Karate feature?
  • Check if a string to interpolate provides expected placeholders
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • log4net write single file for each call to log.info
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`