Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonireilly/cypress-lit
Test your Lit elements and native web components in cypress with all the modern browsers
https://github.com/simonireilly/cypress-lit
custom-elements cypress html lit-element test testing testing-tools web-components webcomponents
Last synced: 3 months ago
JSON representation
Test your Lit elements and native web components in cypress with all the modern browsers
- Host: GitHub
- URL: https://github.com/simonireilly/cypress-lit
- Owner: simonireilly
- License: mit
- Created: 2022-10-12T19:18:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-27T06:45:54.000Z (over 1 year ago)
- Last Synced: 2024-07-05T15:05:11.714Z (4 months ago)
- Topics: custom-elements, cypress, html, lit-element, test, testing, testing-tools, web-components, webcomponents
- Language: TypeScript
- Homepage:
- Size: 675 KB
- Stars: 24
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-components - cypress-lit - Test your Lit elements and native web components in Cypress with all the modern browsers. (Meta Frameworks / Testing Solutions)
README
# cypress-lit
[![NPM Version](https://img.shields.io/npm/v/cypress-lit.svg?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/cypress-lit)
Running cypress component testing on web components and lit elements.
- [cypress-lit](#cypress-lit)
- [Installation](#installation)
- [Setup](#setup)
- [Examples](#examples)
- [With Lit HTML](#with-lit-html)
- [With Native WebComponents](#with-native-webcomponents)
- [Contributing](#contributing)> The below gif is slowed by 10x so you don't miss it 🐢
![Cypress runner showing a component test of a lit element](https://user-images.githubusercontent.com/30017294/201855728-a49d5fef-06f7-4c2c-a0d7-f6027e0135d4.gif)
## Installation
```bash
npm i -D cypress-lit
yarn add -D cypress-lit
pnpm i -D cypress-lit
```### Setup
The command needs to be imported from the package and added to cypress commands.
```ts
# ./cypress/support/component.tsimport "./commands";
import { mount } from "cypress-lit";
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}Cypress.Commands.add("mount", mount);
```When running cypress components testing you will need to specify a custom dev server. This project has tests that use the below configuration.
```ts
// ./cypress.config.tsimport { defineConfig } from "cypress";
export default defineConfig({
component: {
supportFile: "cypress/support/component.ts",
devServer: {
bundler: "vite",
},
indexHtmlFile: "cypress/support/component-index.html",
},
experimentalWebKitSupport: true,
});
```## Examples
There is a collection of tests for:
- [Lit Element](./cypress/component/lit.cy.ts)
- [Pure custom elements](./cypress/component/web-component.cy.ts)### With Lit HTML
You can pass a hit template directly to the mount command.
```ts
// ./cypress/component/lit.cy.ts#L1-L9import "../../templates/index.css";
import { html } from "lit";
import { LitCounter } from "../../templates/counter-lit";describe("Lit mount", () => {
it("mounts", () => {
cy.mount<"counter-lit">(html``);
cy.get("counter-lit").shadow().contains("h1", "Count is 0");
});
```### With Native WebComponents
If you have custom elements defined using pure browser javascript then you can pass in a string.
```ts
// ./cypress/component/web-component.cy.ts#L1-L9import "../../templates/index.css";
import { WebCounter } from "../../templates";describe("Web Component mount", () => {
it("mounts", () => {
cy.mount<"counter-wc">(``);
cy.get("counter-wc").shadow().contains("h1", "Count is 0");
});```
When using custom elements and you need to access the element to set non-string attributes you can do this using the properties option:
```ts
// ./cypress/component/web-component.cy.ts#L26-L39it("can pass emitters as spies", () => {
cy.mount<"counter-wc">(
``,
{ properties: { clicked: cy.spy().as("onClickedSpy") } },
);cy.get("counter-wc").shadow().as("shadow");
cy.get("@shadow").contains("h1", "Count is 42");
cy.get("@shadow").find("button").click();
cy.get("@onClickedSpy").should("have.been.calledWith", 42);
});
```This enables passing spies and other overrides for testing purposes.
## Contributing
Open an issue or a PR with some comments to discuss the feat/fix.
For local running you should be set with:
```bash
pnpm i
pnpm lint
pnpm build
pnpm test
```