Jest: How does jest-resolver treat ! in imports and requires?

[kobyl]

I'm using script-loader for jquery plugins, and do a couple imports like this(in different places):

import 'script-loader!jquery-validation'
require('script-loader!jquery.maskedinput/src/jquery.maskedinput.js');

This is working at runtime on a browser, but not under Jest. I've tried adding script-loader.js to the __mocks__ folder next to node_modules and confirm that my mock code gets run when I just do

jest.mock('script-loader')
require('script-loader')

in a test file.

I'm wondering if the ! in the imports are messing up the resolution? The exact error I'm getting is:
```
● Test suite failed to run

Cannot find module 'script-loader!jquery.maskedinput/src/jquery.maskedinput.js' from 'index.tsx'

  at Resolver.resolveModule (C:/Users/kobyL/AppData/Roaming/npm/node_modules/jest/node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (src/components/MaskedInput/index.tsx:12:1)

```

Thanks!

Koby

[mahesh-beehively]

+1

[SimenB]

That's not valid identifiers, so jest doesn't understand them. You should use loaders (or whatever it's called nowadays) in webpack config, and utilize moduleNameMapper. See https://facebook.github.io/jest/docs/en/webpack.html

[sebadiaz]

+1

[sebadiaz]

We appreciate Some samples. do you have one ?

[SimenB]

Did you read the docs linked above?
If it doesn't work, please set up a small repo showing the error.

[Billy-]

@SimenB using inline loader overrides is a valid use-case of webpack.. I think it would be amiss for jest not to support at least _some_ way of working with them?

I tried adding the module to the moduleNameMapper jest config as "^!!custom-loader!": "<rootDir>/__mocks__/customLoader.js" as I figured this would bypass trying to resolve the module, but jest is tripping up and erroring trying to resolve the file (I'm guessing this happens before honouring mocks?)

[SimenB]

moduleNameMapper is for string => string, it does not support a module that does loading (if I understand your example correctly), it's basically aliasing. So you have to implement it as a regex replacement.

What's your use case for a loader in this case? Could it be implemented as a transform?

I still recommend sticking the loader in your webpack config to avoid tool-specific syntax in your code.

An alternative is to implement the loader using a babel plugin.

[Billy-]

I was hoping that import '!!custom-loader!my-file' would get caught by "^!!custom-loader!": "<rootDir>/__mocks__/customLoader.js" and never try to resolve !!custom-loader!my-file and instead just resolve to the mock? Just like mocking any other module or file?

My use-case is as follows:

I am using sass and have configured the sass/css loaders in my webpack.config. I have one occasion where I would like to import my main sass variables file into js using sass-variables-loader, for use in the JS code across the app. Hence I have a single instance where I need to override the normal webpack configuration and use the sass-variable-loader:

import vars from '!!sass-variable-loader!my-sass-vars.scss'

[SimenB]

@Billy- I see, I'd think that was supposed to work... Can you try putting a breakpoint here and see what happens when your code runs? https://github.com/facebook/jest/blob/819cae5f18b6dc99c16ee2fc4e2df4a93b782290/packages/jest-resolve/src/index.js#L362-L398

I have one occasion where I would like to import my main sass variables file into js using sass-variables-loader

I still think it might be better to add that to exclude in your webpack config, or use oneOf and check for vars in the filename: https://webpack.js.org/configuration/module/#rule-oneof

[Billy-]

Hmm, looks like it is hitting the mock now.. Must have been a typo or something cached. Sorry to waste your time, and thanks for the help!

[rafaeleyng]

@Billy- could you provide the working example? Is not clear how you've managed to make it work.