CODEWITHSUNDEEP
testingjestjsjsdom
dougajmcdonald
dougajmcdonald

Reputation: 20047

Importing `constants` in Jest tests with named imports

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.

Upvotes: 3

Views: 3956

Answers (3)

alreich
alreich

Reputation: 91

@mwamitovi This was probably the best answer i found. i know its weird to see Jest <24 and babel 6, but sometimes you end up working on legacy code.(note: im using vue2.js)

i managed to get this to work by adding the above packages and also es2015, like so(jest v23.x, babel 6):

package.json:

 "devDependencies": {
    "@vue/test-utils": "^1.3.0",
    "axios-mock-adapter": "^1.21.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "jest": "^23.6.0",
    "node-notifier": "^10.0.1",
    "vue-jest": "^3.0.7",
    "webpack": "^3.12.0",
}

jest.config.js:

module.exports = { "verbose": true, "testEnvironment": "jsdom", "moduleFileExtensions": [ "js", "json", "vue" ], "testMatch": [ "**/tests/.test.(js|jsx|ts|tsx)" ], "transform": { ".\.(vue)$": "/node_modules/vue-jest", ".*\.(js)$": "/node_modules/babel-jest" }, "testURL": "http://localhost/", "transformIgnorePatterns": [ "node_modules/(?!(p-retry)/)", ] }

and in your .babelrc

"env": { "test": { "presets": [ ["env", { "modules": alse, "targets": { "browsers": ["> 1%", "last 2 ersions", "not ie <= 8"] } }], "stage-2", "es2015" ## this is key ], "plugins": ["transform-vue-jsx", "transform-runtime"] }

Upvotes: 0

MwamiTovi
MwamiTovi

Reputation: 2502

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"
}
  1. 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

Troubleshooting jest/babel errors

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

Detailed error message from jest

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

Upvotes: 0

Nick Litwin
Nick Litwin

Reputation: 2995

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.

Upvotes: 2

Related Questions