Trouble with component testing and vitest-browser-vue

[awa5114]

Hi all,

I am having some trouble getting the right setup for writing component tests. I have spent considerable effort getting familiar with the vue testing ecosystem and came up with a setup involving Vitest and vitest-browser-vue. vitest-browser-vue is simply a component testing utility that uses Testing Library principles and makes use of Vitest's supposedly powerful browser mode. I am using Playwright as my provider in the vitest configuration file and chromium as my browser instance.

The vitest-browser-vue docs are more or less clear on how to write a simple component test. I therefore created two simple components and wrote the folllowing tests:

test("Component 1", async () => {
    await render(Component1, {
        props: { items: ["item one", "item two", "item three"] },
    });
});

test("Component 2", async () => {
    await render(Component2, {
        props: { items: ["item one", "item two"] },
    });
});

When I launch the test suite a browser window opens, showing me the Vitest browser mode UI. The first test runs and passes. The second test fails with the following error:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I had conversations with a number of LLMs (google AI, Claude and ChatGPT) but couldn't quite get to the bottom of how to fix this. I also made an active effort to reach out to the community:

• Issue in vitest-browser-vue githube repo: link
• Reddit post: link
• StackOverflow post: link
• Vitest Discord server: link
• Vue Discord server: link

It has been three days and I have not gotten any response as of yet. The fact I cannot run two consecutive tests on two separate components really undermines the whole point of using a library like vitest-browser-vue in my opinion, so I am pretty sure I am doing something wrong on my end. Has anyone used vitest-browser-vue in the past to test their components? How did you do it?

[awa5114]

I tried it again today and it seems to work fine. Not sure why I was having trouble. Closing all posts.

[chrisjcthomas]

This NotFoundError: Failed to execute 'removeChild' on 'Node' error is a known cleanup/teardown race condition in vitest-browser-vue. By default, the library automatically runs unmounting and DOM cleanup after each test. During rapid sequential or parameterized test runs, this automated cleanup can clash with the test runner's state transition, trying to remove a DOM element that has already been detached.

To resolve this, you can import render from the pure entry point of the library, which disables automatic cleanup, giving you manual control or bypassing the conflict altogether:

import { render } from "vitest-browser-vue/pure";

test("Component 1", async () => {
    await render(Component1, {
        props: { items: ["item one", "item two", "item three"] },
    });
});

test("Component 2", async () => {
    await render(Component2, {
        props: { items: ["item one", "item two"] },
    });
});

If you still encounter cleanup issues with specific component lifecycles, you can also run manual cleanup/unmount in an afterEach hook using the unmount reference returned by render.