@cypress/svelte NPM

@cypress/svelte

Mount Svelte components in the open source Cypress.io test runner v10.7.0+

Note: This package is bundled with the cypress package and should not need to be installed separately. See the Svelte Component Testing Docs for mounting Svelte components. Installing and importing mount from @cypress/svelte should only be used for advanced use-cases.

Install

Requires Svelte >= 3
Requires Cypress v10.7.0 or later
Requires Node version 12 or above

npm install --save-dev @cypress/svelte

Run

Open cypress test runner

npx cypress open --component

If you need to run test in CI

npx cypress run --component

For more information, please check the official docs for running Cypress and for component testing.

Example

import { mount } from '@cypress/svelte'
import HelloWorld from './HelloWorld.svelte'

describe('HelloWorld component', () => {
  it('works', () => {
    mount(HelloWorld)
    // now use standard Cypress commands
    cy.contains('Hello World!').should('be.visible')
  })
})

Options

In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:

// src/HelloWorld.svelte
import './styles/main.css'
import HelloWorld from './HelloWorld.svelte'

it('looks right', () => {
  // styles are applied
  mount(HelloWorld)
})