fa-svelte
fa-svelte copied to clipboard
Jest: TypeError: Icon is not a constructor
Hello, I don't know if this is the right place to post it; of course, let me know if this is not your problem. Jest is complaining when I'm trying to test a Svelte component which includes an Icon
through fa-svelte
. Relevant parts are:
This would be the simplified component, let's call it Example.svelte
<script>
import Icon from 'fa-svelte';
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons/faPlusCircle.js';
import { faMinusCircle } from '@fortawesome/free-solid-svg-icons/faMinusCircle.js';
export let expanded = false;
</script>
<div class="a-header">
<Icon
class="a-header-icon"
icon={expanded ? faMinusCircle : faPlusCircle}
></Icon>
</div>
Then my test Example.test.js
is something like:
import { render } from '@testing-library/svelte';
import Example from '../src/Example.svelte';
describe('example', () => {
test('renders', () => {
render(Example);
});
});
This results in aforementioned error:
$ npm run test
> jest
FAIL resources/src/tests/Example.test.js
● example › renders
TypeError: Icon is not a constructor
13 | ></Icon>
14 | </div>
> 15 |
| ^
at create_fragment (resources/src/Example.svelte:15:9)
at init (node_modules/svelte/internal/index.js:1465:37)
at new Example (resources/src/Example.svelte:104:3)
at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
at Object.<anonymous> (resources/src/tests/Example.test.js:8:9)
Just in case, this is my Jest configuration:
module.exports = {
transform: {
'^.+\\.svelte$': 'svelte-jester',
'^.+\\.js$': 'babel-jest',
},
moduleFileExtensions: ['js', 'svelte'],
setupFilesAfterEnv: ['./resources/src/tests/setup-env.js']
}
Any insights as to what's going on? Thanks very much in advanced.
EDIT: I'm using "fa-svelte": "^3.1.0"
Does it work with other imported svelte components?
Personally, I have never used jest for testing svelte components.
It works for some libraries, but I had similar problems with one or two, including this one. Jest was not compiling the library before running the test on the one hand, so I instruct it to do it with:
transformIgnorePatterns: [
'node_modules/(?!fa-svelte/)'
]
But, on the other hand, since the default exported element is not a Svelte component, I had to directly import fa-svelte/src/Icon.svelte
(don't know if it's the best solution, but it's the only one that worked for me). Later I found that it had already happened for another library, you can check this answer in SO if interested.
Thanks for the answer, I think we can close the issue tho.