Shallow or Deep can't compile the app when async module are loaded

[G]

Hi there,

I have an issue with tests when there is a module that are loaded with the !async keyword from the preact-cli project.

Let's say I have my app.js that have: import myModule from 'async!./myModule/myModule.js';

If I test an independent module (let's say myOtherModule.js and not app.js nor myModule.js, and myOtherModule has no information about the async loaded module at all), the test will still fail with: Cannot find module 'async!./myModule/myModule.js' from 'app.js'

Do you know how I can work around this error? (For now, I'm just removing the !async but that is not ideal :))

Cheers!

[Z Goddard]

@guillaumebreux It sounds like this has to do with the test running tool. preact-render-spy is a runtime library works with preact and your components in your test cases. It is not involved in finding your modules while testing.

If you're using the default preact-cli template, you'll be using jest. https://github.com/preactjs-templates/default/blob/f67ea78d66099fa237ebae769ba6b1848a0ea783/template/package.json#L34-L57 You can add a jest transform to that configuration to handle async! https://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string. I'm not sure what that transform would specifically be. You need something to transform the target module so its exports is a facsimile of what async! returns when your code runs in the dev server.

[G]

Thanks for the direction I needed to take to fix that!
The final solution was relatively simple afterall:

I had to play with the module name mapper:
https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string :

"moduleNameMapper": {
      "^async!(.*)": "$1",
}

And it works just fine \o/