TL;DR

I want to run my unit tests using Vitest but when using the fixture from @open-wc, it doesn't.

The problem

I have a project using Lit Element with a lot of unit tests and I'm using Playwright as a runner for everything now (using @web/test-runner-playwright).

This is what a test typically looks like:

import { expect, fixture, html } from '@open-wc/testing';

describe('MyComponent', async () => {
  it('should exist', async () => {
    const myComponent = /** @type {MyComponent} */ (
      await fixture(html`
        <my-component></my-component>
      `)
    );

    expect(myComponent).to.exist;
  }
})

To get started with the setup, I used npx vitest init browser. It created vitest.config.js & an example. I added set environment to jsdom and that's about it for my config:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

I went ahead and changed my import to use Vitest in my tests instead:

-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';

But now it go interesting, for unit test not using the browser, not problem is works as expected:

But on the others, I get an error:

I was expecting the import { fixture } from '@open-wc/testing'; to be enough to mount the dom element needed for the test. This what is used for the vue & react example on the Vitest documentation.

It feels like I'm missing something obvious here.

What I tried:

• Adding loaders to follow the React config for example but it didn't change anything.

import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';

export default defineConfig({
  plugins: [litStyleLoader(), litTemplateLoader()],
// ...

• Changed the environment to happy-dom, same.