Unexpected token error when testing Svelte Web Component in Cypress 10.7.0

[alexlibby]

I'm having an issue with running a test in Cypress for a Svelte web component.

The error I get back is this:

> Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svelte:options tag="cobalt-checkbox" />
|
| <script>

This is the test I'm using - the mount command is set in \cypress\support\commands.js:

import Checkbox from '../src/lib/Checkbox/Checkbox.svelte';

describe("Test the Checkbox component", () => {
  before(() => {
    cy.mount(Checkbox);
  });

  it("contains the correct text", () => {
    cy.get("label").should("have.text", "This is a default checkbox");
  });
});

The component itself is this:

<svelte:options tag="cobalt-checkbox" />

<script>
	export let checked = false;
	export let label = "This is a default checkbox";
	export let disabled = false;

	function onChange(event) {
		event.target.dispatchEvent(new CustomEvent("onclick", { composed: true }));
	}

	$: checked = checked !== false;
</script>

I'm reasonably sure this is working, as it is displaying OK in Storybook - can anyone help please to figure out what's causing it to throw the error? I'm not 100% sure if this is a bug or just a bad / unsupported config - happy to provide details if needed!

[lmiller1990]

Hi, can you share how you've configured component testing? Maybe share cypress.config.js and webpack.config.js?

Our docs only show Vite but this should definitely work fine as long as your webpack config knows how to compile a svelte file.