Create-react-app: Why is the Jest moduleNameMapper configuration not supported?

[aaronmcadam]

Is this a bug report?

No

Did you try recovering your dependencies?

No. I don't think this is relevant.

Which terms did you search for in User Guide?

I couldn't find any docs on how to configure Jest

Environment

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Binaries:
Node: 11.0.0 - ~/.asdf/shims/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.asdf/shims/npm
Browsers:
Chrome: 70.0.3538.77
Safari: 12.0
npmPackages:
@types/react: 16.4.18 => 16.4.18
@types/react-dom: 16.0.9 => 16.0.9
react: ^16.6.0 => 16.6.0
react-dom: ^16.6.0 => 16.6.0
react-scripts: 2.1.0 => 2.1.0
npmGlobalPackages:
create-react-app: 2.1.0

Steps to Reproduce

1. Add moduleNameMapper to the package.json jest entry
2. Run the tests

Expected Behavior

I'm using raw-loader to dynamically load SVG Icon files. If I don't override the module, I get an error:

    Cannot find module '!raw-loader!./icons/alchemy.svg' from 'Icon.tsx'

      39 |         {...this.props}
      40 |         dangerouslySetInnerHTML={{
    > 41 |           __html: require(`!raw-loader!./${icon}`),
         |                   ^
      42 |         }}
      43 |         css={{
      44 |           boxSizing: 'border-box',

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Icon.require [as render] (src/alchemy/Icon/Icon.tsx:41:19)

Test Suites: 2 failed, 2 passed, 4 total
Tests:       3 failed, 9 passed, 12 total
Snapshots:   0 total
Time:        3.041s
Ran all test suites.
error Command failed with exit code 1.

I've migrated from create-react-app-typescript where I was able to configure moduleNameMapper (they added it themselves) to stub out SVG files in my tests and add other aliases.

Actual Behavior

Reproducible Demo

https://github.com/aaronmcadam/cra-jest-module-name-mapper

[Timer]

If you want to render the svg as a React component you should be using the following:

import { ReactComponent as Alchemy } from './icons/alchemy.svg'

// ... later

<Alchemy {...this.props} css={{ ... }} />

I'm not sure where you found your example using raw-loader, but that's not expected to work.

Your Jest configuration problem goes away when you do this.

[aaronmcadam]

Hi thanks for responding.I need to dynamically load the SVG files based on a given prop though. I can't figure out how to do that with the import alias syntax.

I'd still like to use aliases if possible without ejecting

[Timer]

Maybe the import all macro?
https://github.com/kentcdodds/import-all.macro

[iansu]

Unfortunately, dynamic imports don't currently work with the import as syntax: https://github.com/facebook/create-react-app/issues/5276

[aaronmcadam]

The import-all.macro doesn't load raw files unfortunately. I suppose I'll need to figure out how to precompile my icons in a build process or something, which is a bit awkward for development.

[aaronmcadam]

I've managed to get something working with https://github.com/smooth-code/svgr. Thanks everybody!

My original question still stands though. Why can we not extend moduleNameMapper for tests so that we can add aliases? Should I be using a jest plugin to do that instead?

[patricklafrance]

@aaronmcadam by using craco to customize your CRA setup you could extends moduleNameMapper.

Here's a recipe to do it: https://github.com/sharegate/craco/blob/master/recipes/add-webpack-alias-to-jest/craco.config.js

I hope this helps!

[aaronmcadam]

Thanks @patricklafrance!