feat: added lit support to browser creator

EskiMojo14 · EskiMojo14 · commit 8951eccad476 · 2025-03-19T16:30:39.000Z
diff --git a/packages/vitest/src/create/browser/creator.ts b/packages/vitest/src/create/browser/creator.ts
@@ -84,6 +84,11 @@ function getFramework(): prompt.Choice[] {
       value: 'react',
       description: '"The library for web and native user interfaces"',
     },
+    {
+      title: 'lit',
+      value: 'lit',
+      description: '"A simple library for building fast, lightweight web components."',
+    },
     {
       title: 'preact',
       value: 'preact',
@@ -112,6 +117,8 @@ function getFrameworkTestPackage(framework: string) {
       return 'vitest-browser-svelte'
     case 'react':
       return 'vitest-browser-react'
+    case 'lit':
+      return 'vitest-browser-lit'
     case 'preact':
       return '@testing-library/preact'
     case 'solid':
@@ -205,6 +212,9 @@ function getPossibleFramework(dependencies: Record<string, string>) {
   if (dependencies.svelte || dependencies['@sveltejs/kit']) {
     return 'svelte'
   }
+  if (dependencies.lit || dependencies['lit-html']) {
+    return 'lit'
+  }
   if (dependencies.preact) {
     return 'preact'
   }
diff --git a/packages/vitest/src/create/browser/examples.ts b/packages/vitest/src/create/browser/examples.ts
@@ -135,6 +135,62 @@ test('renders name', async () => {
 `,
 }
 
+const litExample = {
+  name: 'HelloWorld.js',
+  js: `
+import { html, LitElement } from 'lit'
+
+export class HelloWorld extends LitElement {
+  static properties = {
+    name: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.name = 'World'
+  }
+
+  render() {
+    return html\`<h1>Hello \${this.name}!</h1>\`
+  }
+}
+
+customElements.define('hello-world', HelloWorld)
+`,
+  ts: `
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('hello-world')
+export class HelloWorld extends LitElement {
+  @property({ type: String })
+  name = 'World'
+
+  render() {
+    return html\`<h1>Hello \${this.name}!</h1>\`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hello-world': HelloWorld
+  }
+}
+`,
+  test: `
+import { expect, test } from 'vitest'
+import { render } from 'vitest-browser-lit'
+import { html } from 'lit'
+import './HelloWorld.js'
+
+test('renders name', async () => {
+  const screen = render(html\`<hello-world name="Vitest"></hello-world>\`)
+  const element = screen.getByText('Hello Vitest!')
+  expect(element).toBeInTheDocument()
+})
+`,
+}
+
 const vanillaExample = {
   name: 'HelloWorld.js',
   js: `
@@ -191,6 +247,8 @@ function getExampleTest(framework: string) {
       return vueExample
     case 'svelte':
       return svelteExample
+    case 'lit':
+      return litExample
     case 'marko':
       return markoExample
     default:
