Haul: Configuring Jest to work with Haul

[Traviskn]

I wanted to share how I was able to get jest tests running in a compatible way with Haul. I ran into some issues at first, if we think it's worth while I'd be glad to contribute to documentation.

The first issue I ran into was this:

 FAIL  app/__tests__/App.test.js
  ● Test suite failed to run

    The name `react-native` was looked up in the Haste module map. It cannot be resolved, because there exists several different files, or packages, that provide a module for that particular name and platform. The platform is generic (no extension). You must delete or blacklist files until there remains only one of these:

      * `/Users/joltdev/jolt/code/universal/node_modules/haul/src/utils/__tests__/fixtures/node_modules/react-native/package.json` (package)
      * `/Users/joltdev/jolt/code/universal/node_modules/react-native/package.json` (package)


      at ModuleMap._assertNoDuplicates (node_modules/jest-runtime/node_modules/jest-haste-map/build/module_map.js:128:11)
      at Object.<anonymous> (app/App.js:2:18)

Jest does not use Haul or Webpack to actually transpile your code, so it runs into haste module issues. You can resolve this by configuring Jest to ignore Haul's test version of react native in your package.json. Add the "modulePathIgnorePatterns" option to your Jest config like so:

"jest": {
    "modulePathIgnorePatterns": ["<rootDir>/node_modules/haul/src/utils/__tests__/fixtures/node_modules/react-native/package.json"]
}

Now your tests will not fail for components that try to import react-native

The second issue I ran into was getting tests to resolve modules in the way I had configured in Haul. I have a root "app" directory that I added to the resolve modules so that I could conveniently import anything in that directory (such as components)

Here is my webpack.haul.js:

module.exports = function getHaulWebpackConfig(options, defaults) {
  return {
    entry: './index.js',
    module: {
      ...defaults.module,
    },
    resolve: {
      ...defaults.resolve,
      modules: ['app', 'node_modules'],
    },
  };
};

In order for Jest to also respect this module resolution, you need to add it to the config in your package json. Add the "moduleDirectories" option like so:

"jest": {
    "moduleDirectories": [
      "app",
      "node_modules"
    ]
}

I hope this is helpful, I wonder if it would be worth documenting some tips like this to get Haul and Jest tests working better together.

[thymikee]

You should be good with just:

"jest": {
  "modulePathIgnorePatterns": ["haul/.*/__tests__/.*"]
}

Can you confirm? We're going to move these test fixtures anyway, so we can use them as an example to test end to end.

[timwangdev]

@thymikee This config works for me.

[thymikee]

Actually, we shouldn't publish tests and fixtures, so I'd treat it as a bug currently.

[Traviskn]

@thymikee Oh yes that is a much simpler ignore pattern that works great! Glad to hear the text fixtures will be un-published