feat: add Marko example and include code coverage for Marko files (#4263

)

README.md

@@ -38,7 +38,7 @@ Next generation testing framework powered by Vite.
 - [Native code coverage](https://vitest.dev/guide/features.html#coverage) via [`v8`](https://v8.dev/blog/javascript-code-coverage) or [`istanbul`](https://istanbul.js.org/).
 - [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies.
 - [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking
-- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse))
+- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse), [Marko](./examples/marko))
 - Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina))
 - Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench)
 - [Workspace](https://vitest.dev/guide/workspace) support

docs/.vitepress/components/FeaturesList.vue

@@ -7,7 +7,7 @@
     <ListItem><a target="_blank" href="https://vitejs.dev" rel="noopener noreferrer">Vite</a>'s config, transformers, resolvers, and plugins.</ListItem>
     <ListItem>Use the same setup from your app to run the tests!</ListItem>
     <ListItem><a target="_blank" href="https://twitter.com/antfu7/status/1468233216939245579" rel="noopener noreferrer">Smart & instant watch mode, like HMR for tests!</a></ListItem>
-    <ListItem>Component testing for Vue, React, Svelte, Lit and more</ListItem>
+    <ListItem>Component testing for Vue, React, Svelte, Lit, Marko and more</ListItem>
     <ListItem>Out-of-the-box TypeScript / JSX support</ListItem>
     <ListItem>ESM first, top level await</ListItem>
     <ListItem>Workers multi-threading via <a target="_blank" href="https://github.com/tinylibs/tinypool" rel="noopener noreferrer">Tinypool</a></ListItem>

docs/.vitepress/config.ts

@@ -37,7 +37,7 @@ export default withPwa(defineConfig({
     ['link', { rel: 'icon', href: '/favicon.ico', sizes: 'any' }],
     ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
     ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
-    ['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, node' }],
+    ['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, marko, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, node' }],
     ['meta', { property: 'og:title', content: vitestName }],
     ['meta', { property: 'og:description', content: vitestDescription }],
     ['meta', { property: 'og:url', content: ogUrl }],

docs/config/index.md

@@ -1007,7 +1007,7 @@ List of files included in coverage as glob patterns
 #### coverage.extension
 
 - **Type:** `string | string[]`
-- **Default:** `['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte']`
+- **Default:** `['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte', '.marko']`
 - **Available for providers:** `'v8' | 'istanbul'`
 - **CLI:** `--coverage.extension=<extension>`, `--coverage.extension=<extension1> --coverage.extension=<extension2>`
 

examples/README.md

@@ -20,6 +20,7 @@
 | `solid` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/solid) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/solid?initialPath=__vitest__/) |
 | `svelte` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/svelte) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/svelte?initialPath=__vitest__/) |
 | `sveltekit` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/sveltekit?initialPath=__vitest__/) |
+| `marko` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/marko) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/marko?initialPath=__vitest__/) |
 | `vitesse` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vitesse) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vitesse?initialPath=__vitest__/) |
 | `vue-jsx` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vue-jsx) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue-jsx?initialPath=__vitest__/) |
 | `vue` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vue) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__/) |

examples/marko/components/Hello.marko

@@ -0,0 +1,17 @@
+export interface Input {
+  count: number;
+}
+
+class {
+  declare state: { times: number };
+  onCreate() {
+    this.state = { times: 2 };
+  }
+}
+
+$ const { count } = input;
+$ const { times } = state;
+$ const result = count * times;
+
+<div>${count} x ${times} = ${result}</div>
+<button onClick(() => component.state.times++)>x1</button>

examples/marko/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vitest/example-marko",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@marko/compiler": "latest",
+    "@marko/testing-library": "latest",
+    "@marko/vite": "latest",
+    "@vitest/ui": "latest",
+    "jsdom": "latest",
+    "marko": "latest",
+    "vite": "latest",
+    "vitest": "latest"
+  },
+  "stackblitz": {
+    "startCommand": "npm run test:ui"
+  }
+}

examples/marko/test/__snapshots__/basic.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`mount component 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;

examples/marko/test/__snapshots__/hello.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Hello.marko > mounts 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;

examples/marko/test/basic.test.ts

@@ -0,0 +1,31 @@
+import Hello from '../components/Hello.marko'
+
+let host: HTMLElement
+
+afterEach(() => {
+  host.remove()
+})
+
+test('mount component', async () => {
+  host = document.createElement('div')
+  host.setAttribute('id', 'host')
+  document.body.appendChild(host)
+  const instance = Hello
+    .renderSync({ count: 4 })
+    .appendTo(host)
+    .getComponent()
+  expect(instance).toBeTruthy()
+  expect(host.innerHTML).toContain('4 x 2 = 8')
+  expect(host.innerHTML).toMatchSnapshot()
+  const btn = host.getElementsByTagName('button')[0]
+  btn.click() // or btn.dispatchEvent(new window.Event('click', { bubbles: true }))
+  await tick()
+  expect(host.innerHTML).toContain('4 x 3 = 12')
+  btn.click()
+  await tick()
+  expect(host.innerHTML).toContain('4 x 4 = 16')
+})
+
+async function tick() {
+  await new Promise(resolve => setTimeout(resolve))
+}

examples/marko/test/hello.test.ts

@@ -0,0 +1,21 @@
+import { fireEvent, render, screen } from '@marko/testing-library'
+import Hello from '../components/Hello.marko'
+
+describe('Hello.marko', () => {
+  it('mounts', async () => {
+    const { container } = await render(Hello, { count: 4 })
+    expect(container).toBeTruthy()
+    expect(container.innerHTML).toContain('4 x 2 = 8')
+    expect(container.innerHTML).toMatchSnapshot()
+  })
+
+  it('updates on button click', async () => {
+    await render(Hello, { count: 4 })
+    const btn = screen.getByRole('button')
+    const div = screen.getByText('4 x 2 = 8')
+    await fireEvent.click(btn)
+    expect(div.innerHTML).toBe('4 x 3 = 12')
+    await fireEvent.click(btn)
+    expect(div.innerHTML).toBe('4 x 4 = 16')
+  })
+})

examples/marko/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import marko from '@marko/vite'
+
+export default defineConfig({
+  plugins: [
+    marko(),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})

packages/vitest/src/defaults.ts

@@ -39,7 +39,7 @@ export const coverageConfigDefaults: ResolvedCoverageOptions = {
   exclude: defaultCoverageExcludes,
   reportOnFailure: false,
   reporter: [['text', {}], ['html', {}], ['clover', {}], ['json', {}]],
-  extension: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte'],
+  extension: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte', '.marko'],
   allowExternal: false,
 }
 

packages/vitest/src/types/coverage.ts

@@ -106,7 +106,7 @@ export interface BaseCoverageOptions {
   /**
     * Extensions for files to be included in coverage
     *
-    * @default ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte']
+    * @default ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte', '.marko']
     */
   extension?: string | string[]