testing-library/vue-testing-library

Doesn't cleanup with vitest by default

Maxim-Mazurok opened this issue · 3 comments

Describe the bug A clear and concise description of what the bug is.

Since automatically clean up aftereach was implemented, vitest doesn't run the cleanup by default, leaving previously mounted components to be accessed by later tests.

To Reproduce Steps to reproduce the behavior:

npm init vue@latest + vitest + vue-testing-library, refer to screenshot below for code (basically just two tests and last one should fail to get element)

Expected behavior

It's expected that DOM is cleared up automatically after each test without any custom configuration needed, or the setup guide is updated

Screenshots

image

Related information:

  • @testing-library/vue version: 6.6.1
  • Vue version: 3.2.45
  • node version: v16.13.0
  • npm (or yarn) version: 8.1.0

Relevant code or config (if any)

import { describe, expect, it } from "vitest";

import { render } from "@testing-library/vue";
import HelloWorld from "../HelloWorld.vue";

describe("HelloWorld", () => {
  it("renders properly", () => {
    const { getByText } = render(HelloWorld, {
      props: { msg: "Hello Vitest" },
    });
    expect(getByText("Hello Vitest"));
  });

  it("renders properly again", () => {
    const { getByText } = render(HelloWorld, {
      props: { msg: "Hello Vitest" },
    });
    expect(getByText("Hello Who?"));
  });
});

Additional context

This is because this library expect afterEach to be globally defined, which is not the case with vitest by default.
So adding this to vite config fixes the issue:

test: {
  globals: true
}

Thanks for sharing this fix!