jest: `TypeError: Select is not a constructor`

[asode]

I'm trying to run my tests with jest and testing-library, but for some reason stuck getting the following error:

    TypeError: Select is not a constructor

      at create_if_block (src/components/form/InputField.svelte:446:11)
      at create_fragment (src/components/form/InputField.svelte:87:34)
      at init (node_modules/svelte/internal/index.js:1880:37)
      at new InputField (src/components/form/InputField.svelte:785:3)
      at Array.create_default_slot (src/components/register/Register.svelte:76:16)
      at create_slot (node_modules/svelte/internal/index.js:73:29)
      at create_fragment (src/components/form/Form.svelte:101:23)
      at init (node_modules/svelte/internal/index.js:1880:37)
      at new Form (src/components/form/Form.svelte:291:3)
      at create_fragment (src/components/register/Register.svelte:305:9)
      at init (node_modules/svelte/internal/index.js:1880:37)
      at new Register (src/components/register/Register.svelte:607:3)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (src/components/register/Register.test.ts:152:11)

src/components/form/InputField.svelte:87-97

{#if type == "select-with-filter"}
  <label for={id} class="form-label">{label}</label>
  <Select
    containerStyles="margin-bottom: 2.5rem; border-width: 0px 0px 2px 0px; padding: 0.5rem;"
    containerClasses="p-2 {error ? 'form-input-error' : 'form-input'}"
    items={selectOptions}
    {value}
    {placeholder}
    noOptionsMessage={$t("messages.no-options-available")}
  />
{/if}

Now I did find some topics with the same error but I think these have been outdated, as the answer recommends transforming the component. When I now look at the package in my node_modules/svelte-select folder, there are dist/index.js and dist/index.mjs, so transforming shouldn't be required anymore?

Kinda surprised this has never been reported here in GH. Have I missed something? Thanks for the help in advance!

[rob-balfre]

v5 (which is almost ready) uses SvelteKit's package setup so should fix all these issues...

https://github.com/rob-balfre/svelte-select/tree/feature/v5

svelte-select@5.0.0-alpha.10

[asode]

Thank you for the tip. Unfortunately it still doesn't seem to work. However the error is now different:

/home/asode/coding/svelte-select-test/node_modules/svelte-select/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as default } from './Select.svelte';
                                                                                      ^^^^^^
    SyntaxError: Unexpected token 'export'

    > 4 |   import Select from "svelte-select";
        |                ^
      5 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/components/form/InputField.svelte:4:16)

npm list svelte-select
svelte-select-test@0.0.0-development /home/asode/coding/svelte-select-test
└── svelte-select@5.0.0-alpha.10

[rob-balfre]

@asode do you have other external svelte components that are working with your jest setup?

[asode]

@rob-balfre I'm using svelte-toast and svelte-feather-icons at the moment if those count? I can of course try something else too.

[rob-balfre]

@asode is there a sample repo or something with a svelte+jest setup? The docs are ... interesting!

[Iuriy-Budnikov]

I've the same issue SyntaxError: Unexpected token 'export' in tests and build

[Iuriy-Budnikov]

@rob-balfre It looks like an issue with the latest svelte kit. Try to upgrade it

[rob-balfre]

Any better in latest beta? Thanks

[Iuriy-Budnikov]

It's broken in the sveltekit as well

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /node_modules/svelte-select/Select.svelte

[rob-balfre]

Not seeing any issues with svelte-select and SvelteKit.

https://stackblitz.com/edit/sveltejs-kit-template-default-4nb4q8?file=src/routes/+page.svelte

[rob-balfre]

Closing this... reopen if still an issue...