mercredi 20 juin 2018

Webpack alias & config in Jest tests

I'm updating an older Webpack2 project to Webpack4 and switching the tests over to Jest but have a seemingly simple problem with a couple of the webpack related bits.

Specifically, the project structure for the troublesome bits look like this:

src
    - constants
        - index.js
    - config
        - base.js
        - test.js
        - dev.js
        - dist.js

During testing, the classes under test use import config from 'config' so issue number one is allowing them to find the right config file. With Webpack2 this is subbed in by webpack itself, but obviously not during Jest tests.

I can resolve this by hard coding the specific test config into the moduleNameMapper in the jest config in package.json like so:

"jest": {
    "moduleNameMapper": {
        "^config$": "<rootDir>/src/config/test.js"
    }
}

This appears to work.

The second part of my issue is allowing Jest to find named exports src/constants/index.js using syntax like import { SOME_CONST } from 'constants'.

When I try to use moduleNameMapper I get back undefined from anything that uses the constants and I believe this is because moduleNameMapper is largely used to mock out dependencies rather than supply them. With this in mind I think I need to use modulePaths or moduleDirectories to allow the constants to be located.

I've tried the following configurations (not simultaneously) without any luck:

"modulePaths": [
  "<rootDir>/src/constants",
  "src/constants"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "src/constants",
  "/src/constants"
  "/src/constants/",
  "./src/constants"
],

What should the correct config be for Jest to locate my constants?

If it's any help I'm trying to mimic this Webpack2 config in Jest

  resolve: {
    alias: {
      constants: `${this.srcPathAbsolute}/constants/`
    }
  }

Aucun commentaire:

Enregistrer un commentaire