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.