package updates and fixes (#20)

Co-authored-by: Alex Lohr <alex.lohr@goto.com>

Author: atk

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-testing-library",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Simple and complete Solid testing utilities that encourage good testing practices.",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -51,26 +51,27 @@
     "report:coverage": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.29.4"
+    "@testing-library/dom": "^8.19.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "7.16.7",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "babel-jest": "^27.5.1",
-    "babel-preset-solid": "^1.3.6",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-typescript": "7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.1",
+    "babel-jest": "^29.2.2",
+    "babel-preset-solid": "^1.6.1",
     "coveralls": "^3.1.1",
-    "jest": "^27.5.1",
-    "prettier": "^2.5.1",
-    "pretty-format": "^27.5.1",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "prettier": "^2.7.1",
+    "pretty-format": "^29.2.1",
     "rimraf": "^3.0.2",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.3.8",
-    "typescript": "^4.5.5"
+    "solid-js": "^1.6.1",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "solid-js": ">=1.0.0"

package.json

@@ -30,7 +30,7 @@ test("findByTestId returns the element", async () => {
   expect(await screen.findByTestId("foo")).toBe(ref);
 });
 
-test("userEvent triggers createEffect calls", () => {
+test("userEvent triggers createEffect calls", async () => {
   const cb = jest.fn();
 
   function Counter() {
@@ -46,7 +46,7 @@ test("userEvent triggers createEffect calls", () => {
   } = render(() => <Counter />);
 
   cb.mockClear();
-  userEvent.click(buttonNode! as Element);
+  await userEvent.click(buttonNode! as Element);
   expect(buttonNode).toHaveTextContent("1");
   expect(cb).toHaveBeenCalledTimes(1);
 });

src/__tests__/basic.tsx

@@ -43,7 +43,7 @@ test("allows same arguments as prettyDOM", () => {
   expect(console.log).toHaveBeenCalledTimes(1);
   // @ts-ignore
   expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
-    Array [
+    [
       "<div>
     ...",
     ]

src/__tests__/debug.tsx

@@ -154,14 +154,14 @@ eventTypes.forEach(({ type, events, elementType, init }) => {
   });
 });
 
-test("onInput works", () => {
+test("onInput works", async () => {
   const handler = jest.fn();
 
   const {
     container: { firstChild: input }
   } = render(() => <input type="text" onInput={handler} />);
 
-  userEvent.type(input! as Element, "a");
+  await userEvent.type(input! as Element, "a");
 
   expect(handler).toHaveBeenCalledTimes(1);
 });

src/__tests__/events.tsx

@@ -45,6 +45,8 @@ function render(ui: Ui, options: Options = {}): Result {
   // they're passing us a custom container or not.
   mountedContainers.add({ container, dispose });
 
+  const queryHelpers = getQueriesForElement(baseElement, queries)
+
   return {
     container,
     baseElement,
@@ -53,7 +55,7 @@ function render(ui: Ui, options: Options = {}): Result {
         ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
         : console.log(prettyDOM(el, maxLength, options)),
     unmount: dispose,
-    ...getQueriesForElement(baseElement, queries)
+    ...queryHelpers
   } as Result;
 }
 

src/index.ts

@@ -1,5 +1,6 @@
 import type { JSX } from "solid-js";
-import type { Queries, BoundFunction, prettyFormat } from "@testing-library/dom";
+import { queries } from "@testing-library/dom";
+import type { Queries, BoundFunctions, prettyFormat } from "@testing-library/dom";
 
 export interface Ref {
   container: HTMLElement;
@@ -11,21 +12,19 @@ export type Ui = () => JSX.Element;
 export interface Options {
   container?: HTMLElement;
   baseElement?: HTMLElement;
-  queries?: Queries;
+  queries?: Queries & typeof queries;
   hydrate?: boolean;
 }
 
-export type Extra = { [P in keyof Queries]: BoundFunction<Queries[P]> };
-
 export type DebugFn = (
   baseElement?: HTMLElement | HTMLElement[],
   maxLength?: number,
   options?: prettyFormat.OptionsReceived
 ) => void;
 
-export type Result = {
+export type Result = BoundFunctions<typeof queries> & {
   container: HTMLElement;
   baseElement: HTMLElement;
   debug: DebugFn;
   unmount: () => void;
-} & Extra;
+} ;