{"id":13711731,"url":"https://github.com/bahmutov/cypress-svelte-unit-test","last_synced_at":"2025-05-06T21:32:13.209Z","repository":{"id":37493342,"uuid":"116295670","full_name":"bahmutov/cypress-svelte-unit-test","owner":"bahmutov","description":"Unit testing Svelte components in Cypress E2E test runner","archived":false,"fork":false,"pushed_at":"2025-05-06T09:25:08.000Z","size":6178,"stargazers_count":162,"open_issues_count":29,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-06T10:39:48.092Z","etag":null,"topics":["cypress-io","e2e","sapper","svelte","test","testing","unit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-04T18:50:15.000Z","updated_at":"2025-03-23T03:25:26.000Z","dependencies_parsed_at":"2023-10-16T10:47:18.029Z","dependency_job_id":"8a46e90b-f2dd-4ecd-91cf-a5fad18d6bc8","html_url":"https://github.com/bahmutov/cypress-svelte-unit-test","commit_stats":{"total_commits":279,"total_committers":14,"mean_commits":"19.928571428571427","dds":0.3763440860215054,"last_synced_commit":"86c497ef1269099d754d82e7e112173b5c709c5c"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-svelte-unit-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-svelte-unit-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-svelte-unit-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-svelte-unit-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/cypress-svelte-unit-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252670285,"owners_count":21786024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress-io","e2e","sapper","svelte","test","testing","unit"],"created_at":"2024-08-02T23:01:11.059Z","updated_at":"2025-05-06T21:32:08.395Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"# cypress-svelte-unit-test [![CI][ci image]][ci url] [![circle image]][circle url]\n\n[![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-6.9.1-brightgreen) ![@bahmutov/cy-rollup version](https://img.shields.io/badge/@bahmutov/cy--rollup-2.0.0-brightgreen)\n\n\u003e Component testing for Svelte apps using the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**\n\n![Keypad pin spec](images/pin.gif)\n\n## Videos\n\nI have recorded a series of short (3-4 minutes) videos showing Cypress + `cypress-svelte-unit-test` in action. See the [playlist](https://www.youtube.com/playlist?list=PLP9o9QNnQuAa50lwW3cUql5sgdKIWkapp)\n\n- [Writing the first component test](https://youtu.be/f2y8DOAIVXY)\n- [Pass props to the component](https://youtu.be/9PGqSON9cv8)\n- [Testing message dispatch](https://youtu.be/bx9vJMO0tdQ)\n- [Style component during testing](https://youtu.be/dchx_4Klyok)\n- [Stubbing window.fetch](https://youtu.be/zuyIVHcd8pQ)\n- [Using experimental fetch polyfill](https://youtu.be/F7uJ_ZhmrbE)\n\n## Install\n\nRequires [Node](https://nodejs.org/en/) version 8 or above and Cypress v4.5.0+\n\n```sh\n# Install this plugin and test spec preprocessor\nnpm install --save-dev cypress-svelte-unit-test\n# if Cypress is not installed already\nnpx install --save-dev cypress\n```\n\n1. Tell Cypress to use your `rollup.config.js` to bundle specs using [cypress/plugins/index.js](cypress/plugins/index.js):\n\n```js\nmodule.exports = (on) =\u003e {\n  // @bahmutov/cy-rollup is already a dependency of cypress-svelte-unit-test\n  const filePreprocessor = require('@bahmutov/cy-rollup')\n  on('file:preprocessor', filePreprocessor())\n}\n```\n\n2. ⚠️ 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:\n\n```json\n{\n  \"experimentalComponentTesting\": true,\n  \"componentFolder\": \"src\",\n  \"testFiles\": \"**/*spec.js\"\n}\n```\n\nSee [cypress.json](cypress.json) in this project.\n\n3. Write a test!\n\n```js\nimport HelloWorld from './HelloWorld.svelte'\nimport { mount } from 'cypress-svelte-unit-test'\nit('shows greeting', () =\u003e {\n  mount(HelloWorld, {\n    props: {\n      name: 'World',\n    },\n  })\n  cy.contains('h1', 'Hello World!')\n})\n```\n\nWatch [Writing the first component test](https://youtu.be/f2y8DOAIVXY)\n\n## Known issues\n\n- need to load images differently to transform relative paths\n\n## Code coverage\n\n### Instrument your code\n\nSee [rollup.config.js](rollup.config.js) how you can instrument source files. In short:\n\n```js\n// npm i -D rollup-plugin-istanbul\nimport istanbul from 'rollup-plugin-istanbul'\nplugins: [\n  istanbul({\n    include: ['cypress/components/**'],\n    exclude: ['**/*spec.js'],\n  }),\n]\n```\n\nIn Cypress iframe you should see the code coverage object under `window.__coverage__`.\n\n![Window coverage object](images/window-coverage.png)\n\n### Coverage report\n\nTo merge coverage and generate reports we need to use [@cypress/code-coverage](https://github.com/cypress-io/code-coverage) plugin.\n\n```shell\nnpm i -D @cypress/code-coverage\n```\n\nAdd it to your [cypress/support/index.js](cypress/support/index.js) file\n\n```js\nimport '@cypress/code-coverage/support'\n```\n\nAdd the plugin to your [cypress/plugins/index.js](cypress/plugins/index.js) file\n\n```js\nmodule.exports = (on, config) =\u003e {\n  const filePreprocessor = require('@bahmutov/cy-rollup')\n  on('file:preprocessor', filePreprocessor())\n\n  require('@cypress/code-coverage/task')(on, config)\n  // IMPORTANT to return the config object\n  // with the any changed environment variables\n  return config\n}\n```\n\nAfter the tests finish, you should see messages in the Command Log\n\n![Coverage messages](images/coverage-messages.png)\n\nAnd find generated reports in `coverage` folder. For example, to open the HTML report\n\n```shell\nopen coverage/lcov-report/index.html\n```\n\n![Coverage report](images/coverage-report.png)\n\n**Warning:** I am not sure the coverage numbers are making 100% sense for Svelte files.\n\n## Svelte v3\n\nThis component adaptor is meant for [Svelte v3](https://svelte.dev/blog/svelte-3-rethinking-reactivity). If you need Svelte v2 support, check out branch [svelte-v2](https://github.com/bahmutov/cypress-svelte-unit-test/tree/svelte-v2)\n\n## Use\n\nImport your Svelte component and mount using the provided function. Pass [component options](https://svelte.dev/docs#Creating_a_component) and global document options (like a global CSS)\n\n### Props\n\n```js\n/// \u003creference types=\"cypress\" /\u003e\nimport App from '../components/ChainedBalls.svelte'\nimport { mount } from 'cypress-svelte-unit-test'\n\ndescribe('SVG animation', () =\u003e {\n  it('shows chained balls', () =\u003e {\n    cy.viewport(960, 500)\n    const style = `\n      line {\n        stroke: gray;\n        stroke-width: 2px;\n      }\n    `\n    mount(\n      App,\n      {\n        props: {\n          width: 960,\n          height: 500,\n        },\n      },\n      { style },\n    )\n    cy.get('circle').should('have.length', 50)\n  })\n})\n```\n\nWatch [Pass props to the component](https://youtu.be/9PGqSON9cv8)\n\n### Styles\n\nYou can use local styles, local CSS file path (relative to the the Cypress project root) or external stylesheets. See [styles example](cypress/components/styles). You can surround the component with HTML and mount the component into the element with ID \"here\", see [cypress/components/mount-html](cypress/components/mount-html)\n\n```js\nconst props = {...}\nmount(HelloWorld, props, {\n  html: `\n    \u003cdiv class=\"test-page\"\u003e\n      this is a test\n      \u003cdiv id=\"here\"\u003e\u003c/div\u003e\n      this is after component\n    \u003c/div\u003e\n  `,\n  style: `\n    body {\n      background: pink\n    }\n    .test-page {\n      background: cyan\n    }\n    #here {\n      background: yellow\n    }\n  `,\n})\n```\n\n![Mount HTML example](images/mount-html.png)\n\nWatch [Style component during testing](https://youtu.be/dchx_4Klyok)\n\n### Callbacks\n\nYou can listen for messages from the component by supplying an object of callbacks.\n\n```js\nmount(TodoItem, {\n  props: {\n    id: 'todo-id',\n    text: 'write a test',\n    complete: false,\n  },\n  callbacks: {\n    remove: cy.stub().as('remove'),\n    toggle: cy.stub().as('toggle'),\n    'inner-message': cy.stub().as('inner-message'),\n  },\n})\n```\n\nSee [cypress/components/callbacks](cypress/components/callbacks).\n\nWatch [Testing message dispatch](https://youtu.be/bx9vJMO0tdQ)\n\n## Examples\n\n### Basic examples\n\nSvelte components copied from [https://svelte.dev/examples](https://svelte.dev/examples)\n\nAll components and tests are in [cypress/components](cypress/components) folder\n\n\u003c!-- prettier-ignore-start --\u003e\nTest | Description\n--- | ---\n[animation](cypress/components/animation) | Chained balls SVG animation\n[callbacks](cypress/components/callbacks) | Listen for messages dispatched from the component\n[global-handlers](cypress/components/global-handlers) | Attaches event listeners to `document` and `window`\n[hello](cypress/components/hello) | Hello, component testing!\n[image](cypress/components/image) | Loading Rick-Roll image\n[named-exports](cypress/components/named-exports) | Nice Audio player test\n[nested](cypress/components/nested) | Checking nested components and local styles\n[pin](cypress/components/pin) | Keypad pin test\n[reactive](cypress/components/reactive) | Svelte reactive props, declarations and statements\n[rx](cypress/components/rx) | Fetching GitHub users as a reactive stream\n[styles](cypress/components/styles) | Shows inline, CSS and external stylesheet styles in spec\n[tutorial](cypress/components/tutorial) | A few components and tests from Svelte tutorial\n[mocking-fetch](cypress/components/mocking-fetch) | Mocking `window.fetch` before mounting the component\n[mocking-network](cypress/components/mocking-network) | Polyfills `window.fetch` [automatically](https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/) and tests the component\n\u003c!-- prettier-ignore-end --\u003e\n\n### External examples\n\nYou can find larger Svelte example application with component tests under GitHub topic [cypress-svelte-unit-test-example](https://github.com/topics/cypress-svelte-unit-test-example)\n\n\u003c!-- prettier-ignore-start --\u003e\nName | Description\n--- | ---\n[svelte-ts-example](https://github.com/bahmutov/svelte-ts-example) | Writing Svelte components and tests using TypeScript\n\u003c!-- prettier-ignore-end --\u003e\n\n## Related tools\n\nSame feature for unit testing components from other framesworks using Cypress\n\n- [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test)\n- [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)\n- [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)\n- [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)\n- [cypress-angular-unit-test](https://github.com/bahmutov/cypress-angular-unit-test)\n- [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)\n- [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)\n\n### Small print\n\nAuthor: Gleb Bahmutov \u0026lt;gleb.bahmutov@gmail.com\u0026gt; \u0026copy; 2018\n\n- [@bahmutov](https://twitter.com/bahmutov)\n- [glebbahmutov.com](https://glebbahmutov.com)\n- [blog](https://glebbahmutov.com/blog)\n\nLicense: MIT - do anything with the code, but don't blame me if it does not work.\n\nSupport: if you find any problems with this module, email / tweet /\n[open issue](https://github.com/bahmutov/cypress-svelte-unit-test/issues) on Github\n\n## MIT License\n\nCopyright (c) 2018 Gleb Bahmutov \u0026lt;gleb.bahmutov@gmail.com\u0026gt;\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\n[circle image]: https://circleci.com/gh/bahmutov/cypress-svelte-unit-test/tree/master.svg?style=svg\n[circle url]: https://circleci.com/gh/bahmutov/cypress-svelte-unit-test/tree/master\n[ci image]: https://github.com/bahmutov/cypress-svelte-unit-test/workflows/ci/badge.svg?branch=master\n[ci url]: https://github.com/bahmutov/cypress-svelte-unit-test/actions\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-svelte-unit-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fcypress-svelte-unit-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-svelte-unit-test/lists"}