Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest: TypeError: Icon is not a constructor #23

Open
cuiqui opened this issue Jan 28, 2021 · 2 comments
Open

Jest: TypeError: Icon is not a constructor #23

cuiqui opened this issue Jan 28, 2021 · 2 comments

Comments

@cuiqui
Copy link

cuiqui commented Jan 28, 2021

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
Copy link
Owner

Does it work with other imported svelte components?

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

@cuiqui
Copy link
Author

cuiqui commented Jan 31, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants