how to configure jest with webpack, node_modules and scss

Question

Update: edited jest config in package.json to include identity-obj-proxy and added transform-es2015-modules-commonjs to .babelrc

Trying to setup jest and enzyme to run unit tests on a React.js project. This configuration setting works fine as long as I'm not requiring a node_module in the target component. But if the component I want to test imports a node_module that itself imports a scss file it throws this error:

import('../../scss/bulkAction.scss');
^^^^^^

SyntaxError: Unexpected token import

This is my jest config file:

"jest": {
  "testPathIgnorePatterns": [
    "<rootDir>/(node_modules)"
  ],
  "moduleFileExtensions": [
    "js",
    "jsx"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/_tests_/config/fileMock.js",
          "\\.(css|scss)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest",
    "^.+\\.(css|scss)$": "<rootDir>/app/_tests_/config/scssTransform.js",
    "^(?!.*\\.(js|jsx|json)$)": "<rootDir>/app/_tests_/config/fileTransform.js"
  }
},

this is my .babelrc file

{
  "presets": [
    ["es2015", {"modules": false}], "react", "stage-0"],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

I've tried multiple different configurations and have been reading the docs for quite awhile and haven't been able to solve this problem. I'm hoping someone can help!

Note about our file structure:

/WebApps/ProjectName/ProjectFolder/app

/WebApps/ProjectName/ProjectFolder/package.json /WebApps/ProjectName/ProjectFolder/.babelrc /WebApps/ProjectName/ProjectFolder/node_modules

I add this just incase the file pathing of the may be part of the problem.

Answer 1

You've missed probably transform-es2015-modules-commonjs babel plugin.

Add this to your .babelrc

// .babelrc
{
  "presets": [
    ["es2015", {"modules": false}]
  ],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Remember to install this plugin before using:

babel-plugin-transform-es2015-modules-commonjs --save-dev

When you run your tests with jest, it set the environment as test by default.

In my project I use also identity-obj-proxy, like:

// jest.config.json
{
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy"
  },
}

Also, first install it before using:

npm install --save-dev identity-obj-proxy

I highly recommend reading the page from official jest documentation about integration jest with webpack.

• https://facebook.github.io/jest/docs/webpack.html#mocking-css-modules
• https://facebook.github.io/jest/docs/webpack.html#using-with-webpack-2