cypress-svelte-unit-test [![CI][ci image]][ci url] [![circle image]][circle url]

[![renovate-app badge][renovate-badge]][renovate-app] !cypress version !@bahmutov/cy-rollup version

> Component testing for Svelte apps using the open source Cypress.io E2E test runner v4.5.0+

!Keypad pin spec

Videos

I have recorded a series of short (3-4 minutes) videos showing Cypress + cypress-svelte-unit-test in action. See the playlist

- Writing the first component test
- Pass props to the component
- Testing message dispatch
- Style component during testing
- Stubbing window.fetch
- Using experimental fetch polyfill

Install

Requires Node version 8 or above and Cypress v4.5.0+

``sh


Install this plugin and test spec preprocessor

npm install --save-dev cypress-svelte-unit-test

if Cypress is not installed already

npx install --save-dev cypress
`

1. Tell Cypress to use your rollup.config.js to bundle specs using cypress/plugins/index.js:

`js
module.exports = (on) => {
// @bahmutov/cy-rollup is already a dependency of cypress-svelte-unit-test
const filePreprocessor = require('@bahmutov/cy-rollup')
on('file:preprocessor', filePreprocessor())
}
`

2. ⚠️ Turn the experimental component support on in your cypress.json. You can also specify where component spec files are located. For example, to have them located in src folder use:

`json
{
"experimentalComponentTesting": true,
"componentFolder": "src",
"testFiles": "*/spec.js"
}
`

See cypress.json in this project.

3. Write a test!

`js
import HelloWorld from './HelloWorld.svelte'
import { mount } from 'cypress-svelte-unit-test'
it('shows greeting', () => {
mount(HelloWorld, {
props: {
name: 'World',
},
})
cy.contains('h1', 'Hello World!')
})
`

Watch Writing the first component test

Known issues

- need to load images differently to transform relative paths

Code coverage

$3

See rollup.config.js how you can instrument source files. In short:

`js
// npm i -D rollup-plugin-istanbul
import istanbul from 'rollup-plugin-istanbul'
plugins: [
istanbul({
include: ['cypress/components/**'],
exclude: ['*/spec.js'],
}),
]
`

In Cypress iframe you should see the code coverage object under window.__coverage__.

!Window coverage object

$3

To merge coverage and generate reports we need to use @cypress/code-coverage plugin.

`shell
npm i -D @cypress/code-coverage
`

Add it to your cypress/support/index.js file

`js
import '@cypress/code-coverage/support'
`

Add the plugin to your cypress/plugins/index.js file

`js
module.exports = (on, config) => {
const filePreprocessor = require('@bahmutov/cy-rollup')
on('file:preprocessor', filePreprocessor())

require('@cypress/code-coverage/task')(on, config)
// IMPORTANT to return the config object
// with the any changed environment variables
return config
}
`

After the tests finish, you should see messages in the Command Log

!Coverage messages

And find generated reports in coverage folder. For example, to open the HTML report

`shell
open coverage/lcov-report/index.html
`

!Coverage report

Warning: I am not sure the coverage numbers are making 100% sense for Svelte files.

Svelte v3

This component adaptor is meant for Svelte v3. If you need Svelte v2 support, check out branch svelte-v2

Use

Import your Svelte component and mount using the provided function. Pass component options and global document options (like a global CSS)

$3

`js
///
import App from '../components/ChainedBalls.svelte'
import { mount } from 'cypress-svelte-unit-test'

describe('SVG animation', () => {
it('shows chained balls', () => {
cy.viewport(960, 500)
const style =
line {
stroke: gray;
stroke-width: 2px;
}

mount(
App,
{
props: {
width: 960,
height: 500,
},
},
{ style },
)
cy.get('circle').should('have.length', 50)
})
})
`

Watch Pass props to the component

$3

You can use local styles, local CSS file path (relative to the the Cypress project root) or external stylesheets. See styles example. You can surround the component with HTML and mount the component into the element with ID "here", see cypress/components/mount-html

`js
const props = {...}
mount(HelloWorld, props, {
html:

,
style:
body {
background: pink
}
.test-page {
background: cyan
}
#here {
background: yellow
}
,
})
`

!Mount HTML example

Watch Style component during testing

$3

You can listen for messages from the component by supplying an object of callbacks.

`js
mount(TodoItem, {
props: {
id: 'todo-id',
text: 'write a test',
complete: false,
},
callbacks: {
remove: cy.stub().as('remove'),
toggle: cy.stub().as('toggle'),
'inner-message': cy.stub().as('inner-message'),
},
})
`

See cypress/components/callbacks.

Watch Testing message dispatch

Examples

$3

Svelte components copied from https://svelte.dev/examples

All components and tests are in cypress/components folder


Test | Description
--- | ---
animation | Chained balls SVG animation
callbacks | Listen for messages dispatched from the component
global-handlers | Attaches event listeners to document and window
hello | Hello, component testing!
image | Loading Rick-Roll image
named-exports | Nice Audio player test
nested | Checking nested components and local styles
pin | Keypad pin test
reactive | Svelte reactive props, declarations and statements
rx | Fetching GitHub users as a reactive stream
styles | Shows inline, CSS and external stylesheet styles in spec
tutorial | A few components and tests from Svelte tutorial
mocking-fetch | Mocking window.fetch before mounting the component
mocking-network | Polyfills window.fetch` automatically and tests the component

$3

You can find larger Svelte example application with component tests under GitHub topic cypress-svelte-unit-test-example

Name | Description
--- | ---
svelte-ts-example | Writing Svelte components and tests using TypeScript

Related tools

Same feature for unit testing components from other framesworks using Cypress

- cypress-vue-unit-test
- cypress-react-unit-test
- cypress-cycle-unit-test
- cypress-svelte-unit-test
- cypress-angular-unit-test
- cypress-hyperapp-unit-test
- cypress-angularjs-unit-test

$3

Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2018

- @bahmutov
- glebbahmutov.com
- blog

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet /
open issue on Github

MIT License

Copyright (c) 2018 Gleb Bahmutov <gleb.bahmutov@gmail.com>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

[circle image]: https://circleci.com/gh/bahmutov/cypress-svelte-unit-test/tree/master.svg?style=svg
[circle url]: https://circleci.com/gh/bahmutov/cypress-svelte-unit-test/tree/master
[ci image]: https://github.com/bahmutov/cypress-svelte-unit-test/workflows/ci/badge.svg?branch=master
[ci url]: https://github.com/bahmutov/cypress-svelte-unit-test/actions
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/