Importing `constants` in Jest tests with named imports

Question

I have a config and constants folder in my project. Located in src\config\test.ts & src\constants\index.js respectively.

I've setup Jest to use moduleNameMapper as below so I can just do import config from 'config' and import { SOME_CONST } from 'constants'

"moduleNameMapper": {
  "config$": "<rootDir>/src/config/test.js",
  "constants$": "<rootDir>/src/constants/index.js"
}

However, in my tests any files which use import { SOME_CONST } from 'constants' always get an undefined value for SOME_CONST whereas any which us the default export from config work fine.

Is this a known issue? Am I doing something wrong here? can't seem to pin it down.

Answer 1

I was having the same issue as you, but I eventually found this github issue that addresses it. It looks like constants is a core module and therefore evaluated before jest's module mapping. I found this comment which worked for me and says to put this in your test file:

jest.mock('constants', () => require('path/to/your/constants'))

An alternative is to do what @dougajmcdonald suggested in his comment above, and rename your webpack alias from constants to something else, e.g. app-constants.

Answer 2

I ran into this same challenge too: setting up jest with babel-6.

Previously, i had worked a lot with the create-react-app (CRA) approach. And when i ran into this challenge, deep down i started to really appreciate the awesome work done by the facebook team in coming up with CRA-tool.

Any ways, this is how i went about tackling this challenge. First things first, we need to set the records straight.

• Accept that configuring these modern JavaScript tools is a hustle, therefore be patient
• Jest 24 dropped support for babel-6 (this was my whole challenge, upgrading to babel-7 would come with lots of other changes which i wanted to avoid)
• There is so much documentation on configuring jest to work with babel-7, yet so little with with babel-6.

OK, with that out of the way, let's start:

1. I updated my key dependencies as advised by the official jest docs (24.9) to work with babel-6. And the error of undefined upon running tests persisted.

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-jest": "^23.6.0",
  "babel-preset-env": "^1.7.0",
  "jest": "^24.0.0"
}

2. I went ahead to // comment out some lines to confirm if i would get a remedy but alas i got a more detailed error message from jest (at least it was well explained, thanks guys).

Screenshot-1: Commented out import * as C from ... statement

Screenshot-2: Error message from jest despite commenting out the import constants statement.

3. Finally, this worked, after lots of "googling" plus trial and error, i finally stumbled upon a working combination of dependencies. Well, given that i kept changing these, i decided to save these as --devDependencies, set-up babel-jest as a transformer for my .js code and updated my .babelrc babel config file.

// package.json

  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-jest": "21.2.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "jest": "21.2.1",
    "webpack": "3.6.0"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }

// .babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}