Doesn't cleanup with vitest by default

[Maxim-Mazurok]

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

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
}

[lmiller1990]

Thanks for sharing this fix!

[hypeJunction]

Is there any alternative? Using globals IMO is a an antipattern and, given that we have many testing libraries around, it makes sense to use explicit imports. Any way to bootstrap testing library without allowing globals?

[Maxim-Mazurok]

I personally like to use globals, though on smaller projects don't take time to set them up, and most tests are fine... But yeah, it's not ideal.

Anyway, as mentioned in the docs the alternative is to call cleanup() after each test. This is what VTL does:

afterEach(() => {
  cleanup()
})

In here: https://github.com/testing-library/vue-testing-library/blob/main/src/index.js#L7-L11

You could create some helper method that you'll have to remember to call in all your tests, maybe create a custom eslint rule to remind you about it...

If that sounds like a lot of work and you are still feeling very strongly about not using globals - you can try to patch VTL using something like patch-package and try to import afterAll from vitest or whatever you're using. I think it should resolve fine, as long as you have it installed in your project or globally.

It could actually be an interesting PR, try importing from different popular testing frameworks if available. Or maybe somehow try to figure out which framework is currently running... That's an interesting idea, but also quite a bit of work, compared to just enabling globals...