Closed
Description
👋 I just started learning testing-library, I really like it so far!
I don't understand how cleanup works, from the docs:
Unmounts the component from the container and destroys the container.
My expectation is that tests are isolated, so if I render a component in a test, that component is destroyed (cleaned up?) at the end of the test. But I see a different behavior.
Comp.svelte
<script lang="ts">
export let name: string;
let buttonText = "Button";
function handleClick() {
buttonText = "Button Clicked";
}
</script>
<h1>Hello {name}!</h1>
<button on:click={handleClick}>{buttonText}</button>comp.test.ts
import "@testing-library/jest-dom";
import { render, fireEvent, screen } from "@testing-library/svelte";
import Comp from "../Comp.svelte";
test("shows proper heading when rendered", () => {
render(Comp, { name: "World" });
const heading = screen.getByText("Hello World!");
expect(heading).toBeInTheDocument();
render(Comp, { name: "There" });
});
// Note: This is as an async test as we are using `fireEvent`
test("changes button text on click", async () => {
render(Comp, { name: "World" });
const button = screen.getByRole("button");
// Using await when firing events is unique to the svelte testing library because
// we have to wait for the next `tick` so that Svelte flushes all pending state changes.
await fireEvent.click(button);
expect(button).toHaveTextContent("Button Clicked");
});The test suite fails with the following message:
FAIL src/tests/something.test.ts > changes button text on click
TestingLibraryElementError: Found multiple elements with the role "button"
Here are the matching elements:
Ignored nodes: comments, script, style
<button>
Button
</button>
Ignored nodes: comments, script, style
<button>
Button
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<h1>
Hello
World
!
</h1>
<button>
Button
</button>
</div>
<div>
<h1>
Hello
World
!
</h1>
<button>
Button
</button>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/config.js:40:19
❯ getElementError node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:25:35
❯ getMultipleElementsFoundError node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:29:10
❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:66:13
❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:111:19
❯ src/tests/something.test.ts:28:24
26| test("changes button text on click", async () => {
27| render(Comp, { name: "World" });
28| const button = screen.getByRole("button");
| ^
29|
30| // Using await when firing events is unique to the svelte testing library because
Test Files 1 failed (1)
Tests 1 failed | 2 passed (3)
Start at 19:37:41
Duration 822ms
As far as I understand, the components in the first test are still in the DOM. I tried to manually call cleanup but I got the same result. I also don't see Hello There.
What am I doing wrong?