Merge pull request #6 from tigerabrodi/adhere-to-testing-lib-practices

Adhere to testing lib practices

Author: ryansolid

package-lock.json

@@ -52,6 +52,7 @@
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-typescript": "7.13.0",
     "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.20",
     "babel-jest": "^27.0.0",
     "babel-preset-solid": "^1.0.0",

package.json

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom/extend-expect";
 import { createSignal, createEffect } from "solid-js";
-import { fireEvent, render } from "..";
+import { render, screen } from "..";
+import userEvent from "@testing-library/user-event";
 
 declare global {
   var _$HYDRATION: Record<string, any>;
@@ -24,12 +25,12 @@ test("render calls createEffect immediately", () => {
 test("findByTestId returns the element", async () => {
   let ref!: HTMLDivElement;
 
-  const { findByTestId } = render(() => <div ref={ref} data-testid="foo" />);
+  render(() => <div ref={ref} data-testid="foo" />);
 
-  expect(await findByTestId("foo")).toBe(ref);
+  expect(await screen.findByTestId("foo")).toBe(ref);
 });
 
-test("fireEvent triggers createEffect calls", () => {
+test("userEvent triggers createEffect calls", () => {
   const cb = jest.fn();
 
   function Counter() {
@@ -45,7 +46,7 @@ test("fireEvent triggers createEffect calls", () => {
   } = render(() => <Counter />);
 
   cb.mockClear();
-  fireEvent.click(buttonNode!);
+  userEvent.click(buttonNode! as Element);
   expect(buttonNode).toHaveTextContent("1");
   expect(cb).toHaveBeenCalledTimes(1);
 });

src/__tests__/basic.tsx

@@ -13,9 +13,9 @@ afterEach(() => {
 test("debug pretty prints the container", () => {
   const HelloWorld = () => <h1>Hello World</h1>;
 
-  const { debug } = render(() => <HelloWorld />);
+  render(() => <HelloWorld />);
 
-  debug();
+  screen.debug();
 
   expect(console.log).toHaveBeenCalledTimes(1);
   expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
@@ -29,9 +29,9 @@ test("debug pretty prints multiple containers", () => {
     </>
   );
 
-  const { debug } = render(() => <HelloWorld />);
+  render(() => <HelloWorld />);
   const multipleElements = screen.getAllByTestId("testId");
-  debug(multipleElements);
+  screen.debug(multipleElements);
   expect(console.log).toHaveBeenCalledTimes(2);
   expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
 });

src/__tests__/debug.tsx

@@ -1,5 +1,6 @@
 import { Dynamic } from "solid-js/web";
-import { fireEvent, render } from "..";
+import { render, fireEvent } from "..";
+import userEvent from "@testing-library/user-event";
 
 const eventTypes = [
   {
@@ -160,7 +161,7 @@ test("onInput works", () => {
     container: { firstChild: input }
   } = render(() => <input type="text" onInput={handler} />);
 
-  fireEvent.input(input!, { target: { value: "a" } });
+  userEvent.type(input! as Element, "a");
 
   expect(handler).toHaveBeenCalledTimes(1);
 });

src/__tests__/events.tsx

@@ -1,5 +1,6 @@
+import userEvent from "@testing-library/user-event";
 import { createSignal, onCleanup } from "solid-js";
-import { fireEvent, render } from "..";
+import { screen, render } from "..";
 
 function StopWatch() {
   const [lapse, setLapse] = createSignal(0);
@@ -38,9 +39,9 @@ const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time))
 test("unmounts a component", async () => {
   jest.spyOn(console, "error").mockImplementation(() => {});
 
-  const { unmount, getByText, container } = render(() => <StopWatch />);
+  const { unmount, container } = render(() => <StopWatch />);
 
-  fireEvent.click(getByText("Start") as Element);
+  userEvent.click(screen.getByText("Start") as Element);
 
   unmount();