chore: replace @testing-library/react-hooks by @testing-library/react (…

…#6126)

* chore: replace @testing-library/react-hooks by @testing-library/react

* chore: fixme, help me fixing these tests

* fix: tests of domain-service

* test(evm): fix the tests of useGasOptions

* test: implement feedbacks

apps/ledger-live-desktop/package.json

@@ -158,7 +158,6 @@
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/chart.js": "2.9.41",
     "@types/color": "^3.0.3",

apps/ledger-live-desktop/src/renderer/hooks/useDateFormatter.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { afterAll, beforeAll, beforeEach, describe, expect, jest, test } from "@jest/globals";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import React from "react";
 import * as redux from "react-redux";
 import { Provider } from "react-redux";

apps/ledger-live-desktop/src/renderer/hooks/useLocalizedUrls/useLocalizedUrls.test.tsx

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 import { describe, test, expect, jest } from "@jest/globals";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { combineReducers, legacy_createStore as createStore } from "redux";
 import settings from "~/renderer/reducers/settings";
 import React from "react";

libs/domain-service/package.json

@@ -76,7 +76,6 @@
     "@ledgerhq/types-cryptoassets": "workspace:^",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.10",
     "@types/node": "^20.8.10",
     "@types/testing-library__jest-dom": "^5.14.5",

libs/domain-service/src/__tests__/functional/domain-service.react.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { render, screen, waitFor } from "@testing-library/react";
 import { DomainEmpty, InvalidDomain, NoResolution } from "../../errors";
 import { resolveAddress, resolveDomain } from "../../resolvers";
@@ -65,7 +65,6 @@ describe("useDomain", () => {
   it("should return an error when no resolution is found", async () => {
     const { result } = renderHook(useDomain, {
       initialProps: "",
-      // @ts-expect-error weird ts error
       wrapper,
     });
 
@@ -75,27 +74,25 @@ describe("useDomain", () => {
   });
 
   it("should return an error when no resolution is found", async () => {
-    const { result, waitForValueToChange } = renderHook(useDomain, {
+    const { result } = renderHook(useDomain, {
       initialProps: "404-Not-Found.eth",
-      // @ts-expect-error weird ts error
       wrapper,
     });
 
-    await waitForValueToChange(() => result.current.status === "error");
+    await waitFor(() => result.current.status === "error");
     // @ts-expect-error no type guard
-    expect(result.current.error).toBeInstanceOf(NoResolution);
+    await waitFor(() => expect(result.current.error).toBeInstanceOf(NoResolution));
   });
 
   it("should return an error when the input has a forward registry but content is invalid", async () => {
-    const { result, waitForValueToChange } = renderHook(useDomain, {
+    const { result } = renderHook(useDomain, {
       initialProps: "not|valid|👋.eth",
-      // @ts-expect-error weird ts error
       wrapper,
     });
 
-    await waitForValueToChange(() => result.current.status === "error");
+    await waitFor(() => result.current.status === "error");
     // @ts-expect-error no type guard
-    expect(result.current.error).toBeInstanceOf(InvalidDomain);
+    await waitFor(() => expect(result.current.error).toBeInstanceOf(InvalidDomain));
   });
 
   it("should return a successful forward resolution", async () => {

libs/ledger-live-common/jest.config.ts

@@ -76,19 +76,5 @@ export default {
   collectCoverage: true,
   collectCoverageFrom: ["src/**/*.{ts,tsx}"],
   coverageReporters: ["json", "lcov", "clover", "json-summary"],
-  projects: [
-    {
-      ...defaultConfig,
-      testPathIgnorePatterns: [
-        ...testPathIgnorePatterns,
-        "(/__tests__/.*|(\\.|/)react\\.test|spec)\\.tsx",
-      ],
-    },
-    {
-      ...defaultConfig,
-      displayName: "dom",
-      testEnvironment: "jsdom",
-      testRegex: "(/__tests__/.*|(\\.|/)react\\.test|spec)\\.tsx",
-    },
-  ],
+  projects: [defaultConfig],
 };

libs/ledger-live-common/package.json

@@ -256,7 +256,6 @@
     "@ledgerhq/types-live": "workspace:^",
     "@svgr/core": "^5.5.0",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/bn.js": "^5.1.1",
     "@types/bs58": "^4.0.1",
     "@types/cbor": "^6.0.0",

libs/ledger-live-common/src/apps/react.test.ts

@@ -1,5 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
 import { Subject } from "rxjs";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import { initState } from ".";
 import { deviceInfo155, mockListAppsResult } from "./mock";
 import {

libs/ledger-live-common/src/ble/hooks/useBleDevicePairing.test.ts

@@ -1,4 +1,7 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook, act } from "@testing-library/react";
 import { from } from "rxjs";
 import { DeviceModelId } from "@ledgerhq/devices";
 import Transport from "@ledgerhq/hw-transport";

libs/ledger-live-common/src/ble/hooks/useBleDevicesScanning.test.ts

@@ -1,4 +1,7 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook, act } from "@testing-library/react";
 import type {
   Observer as TransportObserver,
   Subscription as TransportSubscription,

libs/ledger-live-common/src/bridge/useBridgeTransaction.test.ts

@@ -1,5 +1,9 @@
+/**
+ * @jest-environment jsdom
+ */
+import "../__tests__/test-helpers/dom-polyfill";
 import { getCryptoCurrencyById } from "@ledgerhq/cryptoassets";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react";
 import { genAccount } from "../mock/account";
 import { getAccountBridge } from ".";
 import useBridgeTransaction, {
@@ -15,19 +19,19 @@ setSupportedCurrencies(["bitcoin"]);
 describe("useBridgeTransaction", () => {
   test("initialize with a BTC account settles the transaction", async () => {
     const mainAccount = genAccount("mocked-account-1", { currency: BTC });
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useBridgeTransaction(() => ({ account: mainAccount })),
-    );
-    await waitForNextUpdate();
-    expect(result.current.bridgePending).toBeFalsy();
-    expect(result.current.bridgeError).toBeFalsy();
-    expect(result.current.transaction).not.toBeFalsy();
-    expect(result.current.account).not.toBeFalsy();
+    const { result } = renderHook(() => useBridgeTransaction(() => ({ account: mainAccount })));
+
+    await waitFor(() => {
+      expect(result.current.bridgePending).toBeFalsy();
+      expect(result.current.bridgeError).toBeFalsy();
+      expect(result.current.transaction).not.toBeFalsy();
+      expect(result.current.account).not.toBeFalsy();
+    });
   });
 
   test("bridgeError go through", async () => {
     const mainAccount = genAccount("mocked-account-1", { currency: BTC });
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useBridgeTransaction(() => {
         const bridge = getAccountBridge(mainAccount);
         const transaction = bridge.updateTransaction(bridge.createTransaction(mainAccount), {
@@ -36,8 +40,7 @@ describe("useBridgeTransaction", () => {
         return { account: mainAccount, transaction };
       }),
     );
-    await waitForNextUpdate();
-    expect(result.current.bridgeError).not.toBeFalsy();
+    await waitFor(() => expect(result.current.bridgeError).not.toBeFalsy());
   });
 
   test("bridgeError can be caught with globalOnBridgeError", async () => {
@@ -46,7 +49,7 @@ describe("useBridgeTransaction", () => {
       const errors: Array<any> = [];
       setGlobalOnBridgeError(error => errors.push(error));
       const mainAccount = genAccount("mocked-account-1", { currency: BTC });
-      const { waitForNextUpdate } = renderHook(() =>
+      renderHook(() =>
         useBridgeTransaction(() => {
           const bridge = getAccountBridge(mainAccount);
           const transaction = bridge.updateTransaction(bridge.createTransaction(mainAccount), {
@@ -55,9 +58,8 @@ describe("useBridgeTransaction", () => {
           return { account: mainAccount, transaction };
         }),
       );
-      await waitForNextUpdate();
 
-      expect(errors.length).toBe(1);
+      await waitFor(() => expect(errors.length).toBe(1));
       expect(errors[0]).toMatchObject(new Error("isInvalidRecipient_mock_criticalcrash"));
     } finally {
       setGlobalOnBridgeError(before);

libs/ledger-live-common/src/deposit/deposit.integration.test.ts

@@ -1,11 +1,13 @@
 import "../__tests__/test-helpers/setup";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react";
 import { useGroupedCurrenciesByProvider } from ".";
 
 test("list is starting with Bitcoin", async () => {
-  const { waitForNextUpdate, result } = renderHook(() => useGroupedCurrenciesByProvider());
-  await waitForNextUpdate();
-  expect(result.current.sortedCryptoCurrencies.slice(0, 1).map(o => o.id)).toMatchObject([
-    "bitcoin",
-  ]);
+  const { result } = renderHook(() => useGroupedCurrenciesByProvider());
+
+  await waitFor(() =>
+    expect(result.current.sortedCryptoCurrencies.slice(0, 1).map(o => o.id)).toMatchObject([
+      "bitcoin",
+    ]),
+  );
 });

libs/ledger-live-common/src/deviceSDK/hooks/useBatteryStatuses.test.ts

@@ -1,4 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
 import { useBatteryStatuses } from "./useBatteryStatuses";
 
 describe("useBatteryStatuses", () => {

libs/ledger-live-common/src/deviceSDK/hooks/useToggleOnboardingEarlyChecks.test.ts

@@ -1,4 +1,7 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook, act } from "@testing-library/react";
 import {
   UseToggleOnboardingEarlyCheckArgs,
   useToggleOnboardingEarlyCheck,

libs/ledger-live-common/src/exchange/swap/hooks/live-app-migration/useIsSwapLiveApp.test.ts

@@ -1,4 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
 import { useFeature } from "../../../../featureFlags";
 import { useIsSwapLiveApp } from "./useIsSwapLiveApp";
 import { cryptocurrenciesById } from "@ledgerhq/cryptoassets/currencies";

libs/ledger-live-common/src/exchange/swap/hooks/useFromState.test.ts

@@ -1,6 +1,10 @@
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
 import { getCryptoCurrencyById, getTokenById } from "@ledgerhq/cryptoassets";
 import { Account } from "@ledgerhq/types-live";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import BigNumber from "bignumber.js";
 import { selectorStateDefaultValues } from ".";
 import useBridgeTransaction from "../../../bridge/useBridgeTransaction";

libs/ledger-live-common/src/exchange/swap/hooks/usePageState.test.ts

@@ -1,4 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
 import { usePageState } from "./usePageState";
 import { SwapTransactionType } from "../types";
 

libs/ledger-live-common/src/exchange/swap/hooks/usePickDefaultAccount.test.ts

@@ -1,4 +1,8 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
+import { renderHook } from "@testing-library/react";
 import BigNumber from "bignumber.js";
 
 import { usePickDefaultAccount } from "./usePickDefaultAccount";

libs/ledger-live-common/src/exchange/swap/hooks/usePickDefaultCurrency.test.ts

@@ -1,4 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
 import { usePickDefaultCurrency } from "./usePickDefaultCurrency";
 import { getCryptoCurrencyById } from "../../../currencies";
 import type { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";

libs/ledger-live-common/src/exchange/swap/hooks/useReverseAccounts.test.ts

@@ -1,6 +1,10 @@
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
 import { getCryptoCurrencyById, getTokenById } from "@ledgerhq/cryptoassets";
 import type { Account } from "@ledgerhq/types-live";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import { genTokenAccount } from "@ledgerhq/coin-framework/mocks/account";
 import { genAccount } from "../../../mock/account";
 import { useReverseAccounts } from "./useReverseAccounts";

libs/ledger-live-common/src/exchange/swap/hooks/useSelectableCurrencies.test.ts

@@ -1,4 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
 
 import { useSelectableCurrencies } from "./useSelectableCurrencies";
 import { getCryptoCurrencyById } from "../../../currencies";

libs/ledger-live-common/src/exchange/swap/hooks/useSwapTransaction.test.ts

@@ -1,4 +1,8 @@
-import { renderHook } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
+import { renderHook } from "@testing-library/react";
 import { AmountRequired, NotEnoughGas, NotEnoughGasSwap } from "@ledgerhq/errors";
 
 import { useFromAmountStatusMessage } from "./useSwapTransaction";

libs/ledger-live-common/src/exchange/swap/hooks/useToState.test.ts

@@ -1,4 +1,8 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
+import { renderHook, act } from "@testing-library/react";
 import { getCryptoCurrencyById, getTokenById } from "@ledgerhq/cryptoassets";
 import { selectorStateDefaultValues, useToState } from ".";
 import { genTokenAccount } from "@ledgerhq/coin-framework/mocks/account";

libs/ledger-live-common/src/exchange/swap/hooks/useUpdateMaxAmount.test.ts

@@ -1,5 +1,9 @@
+/**
+ * @jest-environment jsdom
+ */
+import "../../../__tests__/test-helpers/dom-polyfill";
 import { getCryptoCurrencyById, getTokenById } from "@ledgerhq/cryptoassets";
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react";
 import BigNumber from "bignumber.js";
 import { checkAccountSupported } from "../../../account/index";
 import ethBridge from "../../../families/evm/bridge/mock";