fix: use userEvent wherever possible

Author: tigerabrodi

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, screen } from "..";
+import { render, screen } from "..";
+import userEvent from "@testing-library/user-event";
 
 declare global {
   var _$HYDRATION: Record<string, any>;
@@ -29,7 +30,7 @@ test("findByTestId returns the element", async () => {
   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

@@ -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, screen, render } from "..";
+import { screen, render } from "..";
 
 function StopWatch() {
   const [lapse, setLapse] = createSignal(0);
@@ -40,7 +41,7 @@ test("unmounts a component", async () => {
 
   const { unmount, container } = render(() => <StopWatch />);
 
-  fireEvent.click(screen.getByText("Start") as Element);
+  userEvent.click(screen.getByText("Start") as Element);
 
   unmount();