Cannot test a svelte component with a defined style section

[nwaughachukwuma]

I get the following error, where I have the subsequently shown .svelte and .spec files.

The following error originated from your test code, not from Cypress.

  > Failed to fetch dynamically imported module: http://localhost:7022/cypress/component/Greeting.spec.ts?import

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

<!-- Greeting.svelte -->
<script lang="ts">
export let greeting: string = 'Hello World!'
</script>

<div class="basic">
  {greeting}
</test>

<style lang="scss">
.basic {
  display: block;
  color: red;
  background-color: blue;
}
</style>

// Greeting.spec.ts
import { mount } from 'cypress-svelte-unit-test'
import Greeting from './Greeting.svelte'

describe('Basic test', () => {
  it('should render Greeting component', () => {
    const greeting = 'Hey Cypress!'
    mount(Greeting, { props: { greeting } })
    cy.contains(greeting)
  })
})```

[sebastinez]

Hey @nwaughachukwuma if you mean applying styles to a components to be tested you can add these as a prop to the mount function, as described here. https://github.com/bahmutov/cypress-svelte-unit-test#styles

In your case this would e.g. be:

// Greeting.spec.ts
import { mount } from 'cypress-svelte-unit-test'
import Greeting from './Greeting.svelte'

describe('Basic test', () => {
  it('should render Greeting component', () => {
    const greeting = 'Hey Cypress!';
    mount(Greeting, { props: { greeting }, {
      style: `
        .basic {
          display: block;
          color: red;
          background-color: blue;
        }`
    } });
    cy.contains(greeting);
  })
})

[nwaughachukwuma]

Thanks @sebastinez.