testing-library / vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
http://testing-library.com/vue
MIT License
1.08k stars 109 forks source link

Doesn't cleanup with vitest by default #296

Closed Maxim-Mazurok closed 1 year ago

Maxim-Mazurok commented 1 year ago

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:

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
}
lmiller1990 commented 1 year ago

Thanks for sharing this fix!