alphapeter / fa-svelte

Font Awesome 5 for svelte.js
MIT License
71 stars 3 forks source link

Jest: TypeError: Icon is not a constructor #23

Open cuiqui opened 3 years ago

cuiqui commented 3 years ago

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"

alphapeter commented 3 years ago

Does it work with other imported svelte components?

Personally, I have never used jest for testing svelte components.

cuiqui commented 3 years ago

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.