Cannot render pre-compiled component

[joelmukuthu]

Hi,

In my tests, when I try to render a svelte component that contains another pre-compiled component (i.e. compiled and published to npm), the test fails with a TypeError: Component is not a Constructor error. Is this a bug or am I doing something wrong?

I've created a repository with a minimal reproduction and you can see the error here:
https://github.com/joelmukuthu/svelte-testing-library-bug/runs/551353980?check_suite_focus=true#step:5:12

I also tried importing the component directly from source i.e.

// button.svelte
<script>
-  import Icon from 'fa-svelte';
+  import Icon from 'fa-svelte/src/Icon.svelte';
</script>

<Icon />

but that fails with a SyntaxError, probably because svelte doesn't compile it. I'm not sure if it's jest or svelte that is excluding node_modules in this case. Either way, I think that would only be a workaround.

Worth noting that building via webpack works - (I think) because in that case the svelte compiler (via webpack) is compiling the imported component from source (fa-svelte/src/Icon.svelte).

Any pointers would be greatly appreciated.

Joel

[mihar-22]

Hey @joelmukuthu the main issue is that Jest doesn't respect the module pkg key and it doesn't transform node_modules by default. You have 3 options:

1. You could use require const Icon = require('fa-svelte')
2. You could import the .svelte file directly import Icon from 'fa-svelte/src/Icon.svelte' and make sure Jest transforms it by adding the following to your Jest config:

"transformIgnorePatterns": [
  "node_modules/(?!fa-svelte)"
]

3. If you really want the pre-compiled code you'll need to create a custom resolver and I don't think Jest supports mjs extensions yet? Not sure.

Hope that helps!

[joelmukuthu]

Hi @mihar-22, thanks a lot for the suggestions! I ended up going with a custom resolver for jest that resolves the svelte field in package.json in addition to the main field. If interested, more details here: joelmukuthu/svelte-testing-library-bug@c1bf085. This works fine for this particular case but to support other fields such module (*.mjs files) a solution like jest-webpack-resolver might be necessary.

Thanks again for the help.