feat: support events & cleanup

Author: Ben Monro

src/index.js

@@ -1,12 +1,25 @@
 import { getQueriesForElement } from "dom-testing-library";
 
+export * from "dom-testing-library";
+let mountedContainers = new Set();
 export const render = (Component, props) => {
-  const rendered = new Component({
-    target: document.body,
+  const container = document.body.appendChild(document.createElement("div"));
+
+  let rendered = new Component({
+    target: container,
     props
   });
 
+  mountedContainers.add(rendered);
   return {
     ...getQueriesForElement(document.body)
   };
 };
+export const cleanup = () => {
+  mountedContainers.forEach(cleanupAtContainer);
+};
+
+const cleanupAtContainer = container => {
+  container.$destroy();
+  mountedContainers.delete(container);
+};

tests/example/App.svelte

@@ -1,5 +1,11 @@
 <script>
 	export let name;
+
+	let buttonText = "Button Text";
+
+	function handleClick() {
+	  buttonText = "Button Clicked";
+	}
 </script>
 
 <style>
@@ -9,3 +15,5 @@
 </style>
 
 <h1>Hello {name}!</h1>
+
+<button on:click={handleClick}>{buttonText}</button>

tests/queries.spec.js

@@ -1,9 +1,21 @@
 import App from "./example/App.svelte";
-import { render } from "../src";
-describe("App", () => {
-  test("should render", () => {
+import { render, fireEvent, waitForElement, cleanup } from "../src";
+
+afterEach(cleanup);
+describe("queries", () => {
+  test("getByText", () => {
     const { getByText } = render(App, { name: "world" });
 
     expect(getByText("Hello world!"));
   });
+
+  test("click button", async () => {
+    const { getByText } = render(App, { name: "world" });
+
+    fireEvent.click(getByText("Button Text"));
+
+    const button = await waitForElement(() => getByText("Button Clicked"));
+
+    expect(button);
+  });
 });