From 7f8dcd67d82cdb9d75a6736fade9706839ef55e4 Mon Sep 17 00:00:00 2001 From: lifeisegg123 Date: Sun, 1 May 2022 17:25:19 +0900 Subject: [PATCH] chore: upgrade version - migrate react-testing-library to support react 18 ([unsolved warning](https://github.com/testing-library/react-testing-library/issues/1051)) - vitest to 0.10.0 --- package.json | 4 +- pnpm-lock.yaml | 114 +++++++++++++----- test/createMutationToolkit.test.ts | 21 ++-- test/createQueryToolkit/infiniteQuery.test.ts | 105 ++++++++-------- test/createQueryToolkit/query.test.ts | 65 +++++----- test/utils.tsx | 8 +- 6 files changed, 193 insertions(+), 124 deletions(-) diff --git a/package.json b/package.json index 25c9d1e..4234c07 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "lint": "eslint ." }, "devDependencies": { - "@testing-library/react-hooks": "^8.0.0", + "@testing-library/react": "^13.1.1", "@typescript-eslint/eslint-plugin": "^5.19.0", "@typescript-eslint/parser": "^5.19.0", "@vitejs/plugin-react": "^1.3.1", @@ -51,7 +51,7 @@ "react-query": "^4.0.0-beta.3", "typescript": "^4.5.4", "vite": "^2.9.2", - "vitest": "^0.9.3" + "vitest": "^0.10.0" }, "peerDependencies": { "react-query": "^4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3409b9e..aac362f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,7 +1,7 @@ lockfileVersion: 5.3 specifiers: - '@testing-library/react-hooks': ^8.0.0 + '@testing-library/react': ^13.1.1 '@typescript-eslint/eslint-plugin': ^5.19.0 '@typescript-eslint/parser': ^5.19.0 '@vitejs/plugin-react': ^1.3.1 @@ -15,10 +15,10 @@ specifiers: react-query: ^4.0.0-beta.3 typescript: ^4.5.4 vite: ^2.9.2 - vitest: ^0.9.3 + vitest: ^0.10.0 devDependencies: - '@testing-library/react-hooks': 8.0.0_react-dom@18.0.0+react@18.0.0 + '@testing-library/react': 13.1.1_react-dom@18.0.0+react@18.0.0 '@typescript-eslint/eslint-plugin': 5.19.0_f34adc8488d2e4f014fe61432d70cbf2 '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3 '@vitejs/plugin-react': 1.3.1 @@ -32,7 +32,7 @@ devDependencies: react-query: 4.0.0-beta.3_react-dom@18.0.0+react@18.0.0 typescript: 4.6.3 vite: 2.9.5 - vitest: 0.9.3_c8@7.11.0+jsdom@19.0.0 + vitest: 0.10.0_c8@7.11.0+jsdom@19.0.0 packages: @@ -389,26 +389,32 @@ packages: picomatch: 2.3.1 dev: true - /@testing-library/react-hooks/8.0.0_react-dom@18.0.0+react@18.0.0: - resolution: {integrity: sha512-uZqcgtcUUtw7Z9N32W13qQhVAD+Xki2hxbTR461MKax8T6Jr8nsUvZB+vcBTkzY2nFvsUet434CsgF0ncW2yFw==} + /@testing-library/dom/8.13.0: + resolution: {integrity: sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==} + engines: {node: '>=12'} + dependencies: + '@babel/code-frame': 7.16.7 + '@babel/runtime': 7.17.9 + '@types/aria-query': 4.2.2 + aria-query: 5.0.0 + chalk: 4.1.2 + dom-accessibility-api: 0.5.14 + lz-string: 1.4.4 + pretty-format: 27.5.1 + dev: true + + /@testing-library/react/13.1.1_react-dom@18.0.0+react@18.0.0: + resolution: {integrity: sha512-8mirlAa0OKaUvnqnZF6MdAh2tReYA2KtWVw1PKvaF5EcCZqgK5pl8iF+3uW90JdG5Ua2c2c2E2wtLdaug3dsVg==} engines: {node: '>=12'} peerDependencies: - '@types/react': ^16.9.0 || ^17.0.0 - react: ^16.9.0 || ^17.0.0 - react-dom: ^16.9.0 || ^17.0.0 - react-test-renderer: ^16.9.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - react-dom: - optional: true - react-test-renderer: - optional: true + react: ^18.0.0 + react-dom: ^18.0.0 dependencies: '@babel/runtime': 7.17.9 + '@testing-library/dom': 8.13.0 + '@types/react-dom': 18.0.3 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-error-boundary: 3.1.4_react@18.0.0 dev: true /@tootallnate/once/2.0.0: @@ -416,6 +422,10 @@ packages: engines: {node: '>= 10'} dev: true + /@types/aria-query/4.2.2: + resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==} + dev: true + /@types/chai-subset/1.3.3: resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==} dependencies: @@ -434,6 +444,28 @@ packages: resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} dev: true + /@types/prop-types/15.7.5: + resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} + dev: true + + /@types/react-dom/18.0.3: + resolution: {integrity: sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==} + dependencies: + '@types/react': 18.0.8 + dev: true + + /@types/react/18.0.8: + resolution: {integrity: sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==} + dependencies: + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.2 + csstype: 3.0.11 + dev: true + + /@types/scheduler/0.16.2: + resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} + dev: true + /@types/use-sync-external-store/0.0.3: resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==} dev: true @@ -653,10 +685,20 @@ packages: color-convert: 2.0.1 dev: true + /ansi-styles/5.2.0: + resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} + engines: {node: '>=10'} + dev: true + /argparse/2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true + /aria-query/5.0.0: + resolution: {integrity: sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==} + engines: {node: '>=6.0'} + dev: true + /array-union/2.1.0: resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} engines: {node: '>=8'} @@ -854,6 +896,10 @@ packages: cssom: 0.3.8 dev: true + /csstype/3.0.11: + resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==} + dev: true + /data-urls/3.0.1: resolution: {integrity: sha512-Ds554NeT5Gennfoo9KN50Vh6tpgtvYEwraYjejXnyTpu1C7oXKxdFk75REooENHE8ndTVOJuv+BEs4/J/xcozw==} engines: {node: '>=12'} @@ -913,6 +959,10 @@ packages: esutils: 2.0.3 dev: true + /dom-accessibility-api/0.5.14: + resolution: {integrity: sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==} + dev: true + /domexception/4.0.0: resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==} engines: {node: '>=12'} @@ -1736,6 +1786,11 @@ packages: yallist: 4.0.0 dev: true + /lz-string/1.4.4: + resolution: {integrity: sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=} + hasBin: true + dev: true + /make-dir/3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} engines: {node: '>=8'} @@ -1934,6 +1989,15 @@ packages: hasBin: true dev: true + /pretty-format/27.5.1: + resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} + engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} + dependencies: + ansi-regex: 5.0.1 + ansi-styles: 5.2.0 + react-is: 17.0.2 + dev: true + /psl/1.8.0: resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==} dev: true @@ -1957,14 +2021,8 @@ packages: scheduler: 0.21.0 dev: true - /react-error-boundary/3.1.4_react@18.0.0: - resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==} - engines: {node: '>=10', npm: '>=6'} - peerDependencies: - react: '>=16.13.1' - dependencies: - '@babel/runtime': 7.17.9 - react: 18.0.0 + /react-is/17.0.2: + resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} dev: true /react-query/4.0.0-beta.3_react-dom@18.0.0+react@18.0.0: @@ -2337,8 +2395,8 @@ packages: fsevents: 2.3.2 dev: true - /vitest/0.9.3_c8@7.11.0+jsdom@19.0.0: - resolution: {integrity: sha512-hKjqdBI732cV5giNLERyAsaJBebstrX5mvTbZr+jUDYUHnX1O4DpAJcHtqBOutuBi7lVIGQ5IF8eWvHHqbCHBA==} + /vitest/0.10.0_c8@7.11.0+jsdom@19.0.0: + resolution: {integrity: sha512-8UXemUg9CA4QYppDTsDV76nH0e1p6C8lV9q+o9i0qMSK9AQ7vA2sjoxtkDP0M+pwNmc3ZGYetBXgSJx0M1D/gg==} engines: {node: '>=v14.16.0'} hasBin: true peerDependencies: diff --git a/test/createMutationToolkit.test.ts b/test/createMutationToolkit.test.ts index 72ff3f4..47411ca 100644 --- a/test/createMutationToolkit.test.ts +++ b/test/createMutationToolkit.test.ts @@ -1,4 +1,5 @@ import { vi, expect, it, describe } from "vitest"; +import { act, waitFor } from "@testing-library/react"; import { createMutationToolkit } from "../src/createMutationToolkit"; import { customRenderHook, mockQueryClient } from "./utils"; @@ -20,17 +21,19 @@ describe("createMutationToolkit", () => { }); it("should handle useMutation", async () => { - const { result, waitFor } = customRenderHook(() => - mockApiMutation.useMutation(), - ); - const res = await result.current.mutateAsync(1); - expect(res).toBe(null); - expect(count).toBe(1); + const { result } = customRenderHook(() => mockApiMutation.useMutation()); + await act(async () => { + const res = await result.current.mutateAsync(1); + expect(res).toBe(null); + expect(count).toBe(1); + }); result.current.mutate(2); - await waitFor(() => result.current.isSuccess); - expect(count).toEqual(3); - expect(mockOnSuccess).toBeCalledTimes(2); + + await waitFor(() => { + expect(mockOnSuccess).toBeCalledTimes(2); + expect(count).toEqual(3); + }); }); it("should indicate proper isMutating", async () => { diff --git a/test/createQueryToolkit/infiniteQuery.test.ts b/test/createQueryToolkit/infiniteQuery.test.ts index c2e6a88..69b4e0b 100644 --- a/test/createQueryToolkit/infiniteQuery.test.ts +++ b/test/createQueryToolkit/infiniteQuery.test.ts @@ -1,3 +1,4 @@ +import { waitFor } from "@testing-library/react"; import { expect, it, describe } from "vitest"; import { createQueryToolkit } from "../../src/createQueryToolkit"; @@ -21,40 +22,41 @@ describe("createQueryToolkit/infiniteQuery", () => { Promise.resolve(mockData.slice(pageParam, pageParam + 1)), { queryType: "infiniteQuery", - } + }, ); it("could be used with useInfiniteQuery", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { queryKey: ["useInfiniteQuery"], getNextPageParam: (_, allPages) => { return allPages.length; }, - }) + }), ); - await waitFor(() => result.current.isSuccess); - expect(result.current.data).toEqual({ - pages: [mockData.slice(0, 1)], - pageParams: [undefined], + await waitFor(() => { + expect(result.current.data).toEqual({ + pages: [mockData.slice(0, 1)], + pageParams: [undefined], + }); }); }); it("should get next page", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { queryKey: ["useInfiniteQuery"], getNextPageParam: (_, allPages) => { return allPages.length; }, - }) + }), ); - await waitFor(() => result.current.isSuccess); - - expect(result.current.data).toEqual({ - pages: [mockData.slice(0, 1)], - pageParams: [undefined], + await waitFor(() => { + expect(result.current.data).toEqual({ + pages: [mockData.slice(0, 1)], + pageParams: [undefined], + }); }); const { data } = await result.current.fetchNextPage(); @@ -66,7 +68,7 @@ describe("createQueryToolkit/infiniteQuery", () => { }); it("could be used with select", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { select: (data) => ({ pages: data.pages.map((v) => v.map((v) => v.text)), @@ -76,13 +78,13 @@ describe("createQueryToolkit/infiniteQuery", () => { return allPages.length; }, queryKey: ["select"], - }) + }), ); - await waitFor(() => result.current.isSuccess); - - expect(result.current.data).toEqual({ - pages: [["123"]], - pageParams: [undefined], + await waitFor(() => { + expect(result.current.data).toEqual({ + pages: [["123"]], + pageParams: [undefined], + }); }); }); @@ -94,7 +96,7 @@ describe("createQueryToolkit/infiniteQuery", () => { const { result } = customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { queryKey: ["prefetch"], - }) + }), ); expect(result.current.isLoading).toEqual(false); @@ -108,17 +110,17 @@ describe("createQueryToolkit/infiniteQuery", () => { const { result } = customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { queryKey: ["isFetching1"], - }) + }), ); customRenderHook(() => simpleApiQuery.useInfiniteQuery([], { queryKey: ["isFetching2"], - }) + }), ); const { result: isFetchingResult } = customRenderHook(() => - simpleApiQuery.useIsFetching() + simpleApiQuery.useIsFetching(), ); expect(result.current.isFetching).toEqual(true); @@ -140,23 +142,25 @@ describe("createQueryToolkit/infiniteQuery", () => { Promise.resolve( mockData .filter((v) => v.type === type) - .slice(pageParam, pageParam + 1) + .slice(pageParam, pageParam + 1), ), - { queryType: "infiniteQuery", passArgsToQueryKey: true } + { queryType: "infiniteQuery", passArgsToQueryKey: true }, ); it("should pass args to api func", async () => { - const { result, waitFor } = customRenderHook(() => - argApiQuery.useInfiniteQuery(["a"]) + const { result } = customRenderHook(() => + argApiQuery.useInfiniteQuery(["a"]), ); - await waitFor(() => result.current.isSuccess); + + await waitFor(() => { + expect(result.current.data).toEqual({ + pages: [[{ text: "1", id: 1, type: "a" }]], + pageParams: [undefined], + }); + }); const data = argApiQuery.getQueryData(["a"]); - expect(result.current.data).toEqual({ - pages: [[{ text: "1", id: 1, type: "a" }]], - pageParams: [undefined], - }); expect(data).toEqual({ pages: [[{ text: "1", id: 1, type: "a" }]], pageParams: [undefined], @@ -171,16 +175,16 @@ describe("createQueryToolkit/infiniteQuery", () => { }); it("should pass proper queryKey by args", async () => { - const { result: query1Res, waitFor: wait1 } = customRenderHook(() => - argApiQuery.useInfiniteQuery(["a"]) + const { result: query1Res } = customRenderHook(() => + argApiQuery.useInfiniteQuery(["a"]), ); - const { result: query2Res, waitFor: wait2 } = customRenderHook(() => - argApiQuery.useInfiniteQuery(["b"]) + const { result: query2Res } = customRenderHook(() => + argApiQuery.useInfiniteQuery(["b"]), ); - await wait1(() => query1Res.current.isSuccess); - await wait2(() => query2Res.current.isSuccess); - expect(query1Res.current.data).not.toEqual(query2Res.current.data); + await waitFor(() => { + expect(query1Res.current.data).not.toEqual(query2Res.current.data); + }); }); it("should not pass args to queryKey", async () => { @@ -191,23 +195,22 @@ describe("createQueryToolkit/infiniteQuery", () => { Promise.resolve( mockData .filter((v) => v.type === type) - .slice(pageParam, pageParam + 1) + .slice(pageParam, pageParam + 1), ), { passArgsToQueryKey: false, - } + }, ); - const { result: query1Res, waitFor: wait1 } = customRenderHook(() => - queryNotPassArgsToQueryKey.useQuery(["a"]) + const { result: query1Res } = customRenderHook(() => + queryNotPassArgsToQueryKey.useQuery(["a"]), ); - const { result: query2Res, waitFor: wait2 } = customRenderHook(() => - queryNotPassArgsToQueryKey.useQuery(["b"]) + const { result: query2Res } = customRenderHook(() => + queryNotPassArgsToQueryKey.useQuery(["b"]), ); - await wait1(() => query1Res.current.isSuccess); - await wait2(() => query2Res.current.isSuccess); - - expect(query1Res.current.data).toEqual(query2Res.current.data); + await waitFor(() => { + expect(query1Res.current.data).toEqual(query2Res.current.data); + }); }); }); }); diff --git a/test/createQueryToolkit/query.test.ts b/test/createQueryToolkit/query.test.ts index b0eefa3..dfd7d63 100644 --- a/test/createQueryToolkit/query.test.ts +++ b/test/createQueryToolkit/query.test.ts @@ -1,3 +1,4 @@ +import { waitFor } from "@testing-library/react"; import { expect, it, describe } from "vitest"; import { createQueryToolkit } from "../../src/createQueryToolkit"; @@ -15,24 +16,25 @@ describe("createQueryToolkit/query", () => { const simpleApiQuery = queryToolkit(["simpleApi"], simpleApi); it("could be used with useQuery", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => simpleApiQuery.useQuery([], { queryKey: ["useQuery"] }), ); - await waitFor(() => result.current.isSuccess); - expect(result.current.data).toEqual(mockData); + await waitFor(async () => { + expect(result.current.data).toEqual(mockData); + }); }); it("could be used with select", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => simpleApiQuery.useQuery([], { select: (data) => data[0].text, queryKey: ["select"], }), ); - await waitFor(() => result.current.isSuccess); - - expect(result.current.data).toEqual("123"); + await waitFor(() => { + expect(result.current.data).toEqual("123"); + }); }); it("can set query data", async () => { @@ -109,14 +111,14 @@ describe("createQueryToolkit/query", () => { const argApiQuery = queryToolkit(["argApi"], argApi); it("should pass args to api func", async () => { - const { result, waitFor } = customRenderHook(() => - argApiQuery.useQuery([1]), - ); - await waitFor(() => result.current.isSuccess); + const { result } = customRenderHook(() => argApiQuery.useQuery([1])); + + await waitFor(() => { + expect(result.current.data).toEqual({ text: "1", id: 1 }); + }); const data = argApiQuery.getQueryData([1]); - expect(result.current.data).toEqual({ text: "1", id: 1 }); expect(data).toEqual({ text: "1", id: 1 }); const fetchedData = await argApiQuery.fetchQuery([2]); @@ -135,33 +137,32 @@ describe("createQueryToolkit/query", () => { }); it("should pass proper queryKey by args", async () => { - const { result: query1Res, waitFor: wait1 } = customRenderHook(() => + const { result: query1Res } = customRenderHook(() => argApiQuery.useQuery([1]), ); - const { result: query2Res, waitFor: wait2 } = customRenderHook(() => + const { result: query2Res } = customRenderHook(() => argApiQuery.useQuery([2]), ); - await wait1(() => query1Res.current.isSuccess); - await wait2(() => query2Res.current.isSuccess); - expect(query1Res.current.data).not.toEqual(query2Res.current.data); + await waitFor(() => { + expect(query1Res.current.data).not.toEqual(query2Res.current.data); + }); }); it("should not pass args to queryKey", async () => { const queryNotPassArgsToQueryKey = queryToolkit(["argApi"], argApi, { passArgsToQueryKey: false, }); - const { result: query1Res, waitFor: wait1 } = customRenderHook(() => + const { result: query1Res } = customRenderHook(() => queryNotPassArgsToQueryKey.useQuery([1]), ); - const { result: query2Res, waitFor: wait2 } = customRenderHook(() => + const { result: query2Res } = customRenderHook(() => queryNotPassArgsToQueryKey.useQuery([2]), ); - await wait1(() => query1Res.current.isSuccess); - await wait2(() => query2Res.current.isSuccess); - - expect(query1Res.current.data).toEqual(query2Res.current.data); + await waitFor(() => { + expect(query1Res.current.data).toEqual(query2Res.current.data); + }); }); }); describe("with default options", () => { @@ -197,25 +198,27 @@ describe("createQueryToolkit/query", () => { }); it("should throw error", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => defaultOptionQuery.useQuery([], { enabled: true }), ); - expect(result.current.isFetching).toEqual(true); - await waitFor(() => result.current.isError); - expect(result.current.data).toEqual(initialData); - expect(result.current.isError).toEqual(true); + await waitFor(() => { + expect(result.current.data).toEqual(initialData); + expect(result.current.isError).toEqual(true); + expect(result.current.isFetching).toEqual(false); + }); }); it("should get data", async () => { - const { result, waitFor } = customRenderHook(() => + const { result } = customRenderHook(() => defaultOptionQuery.useQuery([]), ); expect(result.current.isFetching).toEqual(false); const data = await result.current.refetch(); - await waitFor(() => !result.current.isFetching); - expect(data.data).toEqual(mockData); + await waitFor(() => { + expect(data.data).toEqual(mockData); + }); }); }); }); diff --git a/test/utils.tsx b/test/utils.tsx index 0ca0ebe..88d9d76 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -1,7 +1,9 @@ import React from "react"; -import { renderHook } from "@testing-library/react-hooks"; +import { renderHook } from "@testing-library/react"; import { QueryClient, QueryClientProvider } from "react-query"; +globalThis.IS_REACT_ACT_ENVIRONMENT = true; + export const mockQueryClient = new QueryClient({ defaultOptions: { queries: { @@ -16,9 +18,9 @@ const wrapper = ({ children }: { children?: any }) => ( export const customRenderHook = ( hook: (props: TProps) => TResult, - options? + options?, ) => { - return renderHook(hook, { + return renderHook(hook, { ...options, wrapper, });