Search code examples
vue.jsunit-testingvitest

Unmount wrapper automatically

I am using Vitest along with Testing Library - Vue for unit testing my frontend code. I have been following this pattern:

describe("LoadingSpinner", () => {
  const defaultWidth = "4rem";
  const defaultHeight = "4rem";

  it("should have a default height of 4rem when no props are passed", async () => {
    const wrapper = render(LoadingSpinner);

    const component = await screen.findByRole("status");

    expect(component.style.height).toBe(defaultHeight);

    wrapper.unmount();
  });

  //etc...
}

I am wondering if there is a better way to automatically unmount the wrapper, rather than manually calling wrapper.unmount()? If I don't unmount the wrapper, each test creates a new LoadingSpinner and thus screen.findByRole() fails.

Solution

  • Yes you can, there is an enableAutoUnmount in vue test utils

    describe("LoadingSpinner", () => {
  enableAutoUnmount(afterEach); // <----- add this
  const defaultWidth = "4rem";