Migrate unit tests to Vitest by brentswisher · Pull Request #1332 · ithaka/pharos

brentswisher · 2026-07-08T16:30:06Z

This change: (check at least one)

Is this a breaking change? (check one)

Yes
No

Is the: (complete all)

Title of this pull request clear, concise, and indicative of the issue number it addresses, if any?
Test suite(s) passing?
Code coverage maximal?
Changeset added?

What does this change address?
Closes #1009 and #580

How does this change work?
This updates all of the unit tests to use Vitest, by translating the assertions from open-wc/sinon to vitest.

Additional context

A few notes:

The test fixture no longer clears the DOM between tests. Vitest's browser mode handles isolation between test files, and the manual clearing caused issues with some tests which built additional dom structure insinde the test, but outside the fixture. For tests where the DOM does need to be cleared between tests, it is now done in a afterEach block.
There are a handful of places where errors are thrown in async functions because they use the updated lifecycle method. The errorFixture doesn't work for those case. I added one-off error listening/suppression in these few spots rather that update the fixture to handle them as doing so really complicated it.
One image card test is now skipped, it surfaces a pre-existing bug filed in No error is emitted when selected attribute set on a non-selectable variant of the image card #1331
Where tests previously relied on open-wc's elementUpdated/waitUntil for components that re-render asynchronously, those are now vi.waitFor(() => expect(...)) calls that wait on the settled state rather than guessing frame counts or timing.

changeset-bot · 2026-07-08T16:30:13Z

⚠️ No Changeset found

Latest commit: 260a8b9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-07-08T16:32:54Z

size-limit report 📦

Path	Size
packages/pharos/lib/index.js	1.05 MB (0%)

brentswisher · 2026-07-08T18:26:55Z

    component = await fixture(html` <test-pharos-button>I am a button</test-pharos-button> `);
  });

+  afterEach(() => {


Vitest clears the DOM between test file, but not tests. Tests which reference the document directly need to include cleanup like this to prevent cross-test interference

can you clarify what counts as 'referencing the document directly' here?

Yeah, no problem, at least this is my understanding 😄

In some of the button tests like this one:

pharos/packages/pharos/src/components/button/pharos-button.test.ts

Lines 295 to 312 in 260a8b9

it('submits a form when type is set to "submit"', async () => {

const parentNode = document.createElement('form');

let formdata = new FormData();

parentNode.setAttribute('name', 'my-form');

const submitButton = document.createElement('test-pharos-button') as PharosButton;

submitButton.type = 'submit';

submitButton.appendChild(document.createTextNode('I am a button'));

parentNode.appendChild(submitButton);

component = await fixture(

html`

<test-pharos-text-input name="my-input" value="test">

<span slot="label">I am a label</span>

</test-pharos-text-input>

`,

{ parentNode }

);

We are creating a form element, and passing it in to the fixture function as the parent element.

The fixture then mounts the component in that element and appends it to the page DOM using document.body.appendChild:

pharos/packages/pharos/src/test/fixture.ts

Lines 17 to 24 in 260a8b9

const mount = (template: TemplateResult, parentNode?: HTMLElement): Element => {

const container = parentNode ?? document.createElement('div');

document.body.appendChild(container);

render(template, container);

return container.firstElementChild as Element;

};

The test then runs and asserts thing, but Vitest browser won't clean up that form element from the DOM. It only does that automatically in between different test files, not individual tests.

Then, in the next test we do the same thing: add a form element, mount, etc.

But when it gets to this line, the selector will find 2 form elements in the page DOM, one from the previous test and one from the current test, and fail.

pharos/packages/pharos/src/components/button/pharos-button.test.ts

Line 314 in 260a8b9

const form = document.querySelector('form');

Adding the afterEach block will clear the DOM between tests to keep that from happening.

brentswisher · 2026-07-08T18:28:55Z

+    await expect(component).toBeAccessible();
  });

  it('throws an error for an invalid variant value', async () => {


This is arguable a bug in the component we should fix, but for now just wanted to limit changes to the tests

brentswisher · 2026-07-08T18:31:49Z

+    trigger.setAttribute('data-sheet-id', 'focus-sheet');
    document.body.appendChild(trigger);

-    const button = document.querySelector('#trigger') as HTMLButtonElement;


I'm not sure why this was reselcting the trigger with a querySelector before?

lizlove

Congrats ! 🥳
Had a quick clarifying question but otherwise 👏

lizlove · 2026-07-08T20:30:04Z

    component = await fixture(html` <test-pharos-button>I am a button</test-pharos-button> `);
  });

+  afterEach(() => {


can you clarify what counts as 'referencing the document directly' here?

The DOM is cleared between each test file run in Vitest, and manually clearing it here breaks tests that rely on DOM setup before the fixture is called. We can manually clear the DOM in tests that need it, but we shouldn't do it in the fixture itself.

brentswisher force-pushed the feature/migrate-test-to-vitest branch from 9f3dcf4 to d55a66d Compare July 8, 2026 16:30

brentswisher self-assigned this Jul 8, 2026

brentswisher added infrastructure testing/integration tests labels Jul 8, 2026

brentswisher force-pushed the feature/migrate-test-to-vitest branch from 48b1b7c to cc349dc Compare July 8, 2026 18:11

brentswisher commented Jul 8, 2026

View reviewed changes

brentswisher marked this pull request as ready for review July 8, 2026 18:49

brentswisher requested a review from a team as a code owner July 8, 2026 18:49

brentswisher requested review from jialin-he, lizlove and shoupeva-ithaka and removed request for a team July 8, 2026 18:49

lizlove approved these changes Jul 8, 2026

View reviewed changes

brentswisher added 9 commits July 8, 2026 17:01

test: migrate tests to use vitest

4e88616

chore: remove @open-wc/testing and sinon dependencies and related config

0aa8059

docs(test): clarify why we can't use errorFixture for icon load errors

3ee5ca7

chore: clean up no longer needed ignoredUnhandledErrors

41a7049

test: fix and remove remaining ignored errors

8b142f5

test(pagination): migrate to Vitest syntax

7b51243

test(tooltip): error assertion should list valid placements

6fa61e3

test(tooltip): fix regression ni multiple trigger test

260a8b9

brentswisher force-pushed the feature/migrate-test-to-vitest branch from e204eb3 to 260a8b9 Compare July 8, 2026 21:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migrate unit tests to Vitest#1332

Migrate unit tests to Vitest#1332
brentswisher wants to merge 9 commits into
developfrom
feature/migrate-test-to-vitest

brentswisher commented Jul 8, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 8, 2026

Uh oh!

brentswisher Jul 8, 2026

Uh oh!

lizlove Jul 8, 2026

Uh oh!

brentswisher Jul 8, 2026

Uh oh!

brentswisher Jul 8, 2026

Uh oh!

brentswisher Jul 8, 2026

Uh oh!

lizlove left a comment

Uh oh!

lizlove Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	it('submits a form when type is set to "submit"', async () => {
	const parentNode = document.createElement('form');
	let formdata = new FormData();
	parentNode.setAttribute('name', 'my-form');

	const submitButton = document.createElement('test-pharos-button') as PharosButton;
	submitButton.type = 'submit';
	submitButton.appendChild(document.createTextNode('I am a button'));
	parentNode.appendChild(submitButton);

	component = await fixture(
	html`
	<test-pharos-text-input name="my-input" value="test">
	<span slot="label">I am a label</span>
	</test-pharos-text-input>
	`,
	{ parentNode }
	);

	const mount = (template: TemplateResult, parentNode?: HTMLElement): Element => {
	const container = parentNode ?? document.createElement('div');
	document.body.appendChild(container);

	render(template, container);

	return container.firstElementChild as Element;
	};

Uh oh!

Conversation

brentswisher commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Jul 8, 2026

size-limit report 📦

Uh oh!

brentswisher Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

lizlove Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

brentswisher Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

brentswisher Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

brentswisher Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

lizlove left a comment

Choose a reason for hiding this comment

Uh oh!

lizlove Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brentswisher commented Jul 8, 2026 •

edited

Loading

changeset-bot Bot commented Jul 8, 2026 •

edited

Loading