fix: deprecated test utils (#1424)

- Audit check now ignores vulnerabilities with no known patched version - Test utils using act methods deprecated in React 18.3
FuelLabs · Aug 7, 2024 · abfad2e · abfad2e
1 parent 4c3788b
commit abfad2e
Show file tree

Hide file tree

Showing 17 changed files with 2,487 additions and 7,702 deletions.
diff --git a/.changeset/sour-planes-wait.md b/.changeset/sour-planes-wait.md
@@ -0,0 +1,6 @@
+---
+"fuels-wallet": patch
+---
+
+- Audit check now ignores vulnerabilities with no known patched version
+- Test utils using act methods deprecated in React 18.3
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -56,6 +56,35 @@ jobs:
  audit:
  name: Audit
  runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: FuelLabs/github-actions/setups/node@master
+ with:
+ node-version: 18.18.0
+ pnpm-version: 8.15.7
+ - name: Install jq
+ run: sudo apt-get install jq
+ - run: |
+ pnpm audit --prod --json | jq '
+ def has_fix: 
+ .advisories | to_entries | map(.value.patched_versions != "<0.0.0") | any;
+ if has_fix then
+ 1
+ else
+ 0
+ end
+ ' > audit_result.txt
+ if [ "$(cat audit_result.txt)" -eq "1" ]; then
+ echo "Actionable vulnerabilities found"
+ exit 1
+ else
+ echo "No actionable vulnerabilities"
+ exit 0
+ fi
+ 
+ strict-audit:
+ name: Strict Audit
+ runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v3
  - uses: FuelLabs/github-actions/setups/node@master

diff --git a/examples/cra-dapp/package.json b/examples/cra-dapp/package.json
@@ -11,13 +11,13 @@
  "@fuels/react": "0.21.0",
  "@tanstack/react-query": "5.28.4",
  "fuels": "pr-2479",
- "react": "18.2.0",
- "react-dom": "18.2.0"
+ "react": "18.3.1",
+ "react-dom": "18.3.1"
  },
  "devDependencies": {
  "@tanstack/react-query-devtools": "5.28.4",
- "@types/react": "18.2.56",
- "@types/react-dom": "18.2.19",
+ "@types/react": "18.3.3",
+ "@types/react-dom": "18.3.0",
  "@vitejs/plugin-react": "4.2.1",
  "typescript": "5.2.2",
  "vite": "5.1.4"

diff --git a/package.json b/package.json
@@ -71,8 +71,8 @@
  "@playwright/test": "1.39.0",
  "@types/jest": "^29.5.5",
  "@types/node": "20.8.4",
- "@types/react": "^18.2.28",
- "@types/react-dom": "^18.2.13",
+ "@types/react": "^18.3.3",
+ "@types/react-dom": "^18.3.0",
  "@xstate/cli": "0.5.2",
  "dotenv": "^16.3.1",
  "fs-extra": "^11.1.1",

diff --git a/packages/app/jest.setup.ts b/packages/app/jest.setup.ts
@@ -19,6 +19,17 @@ import { localStorageMock } from './src/mocks/localStorage';
 // https://github.com/jsdom/jsdom/issues/1724#issuecomment-720727999
 import 'whatwg-fetch';
 
+import { act } from 'react';
+
+// Replace ReactDOMTestUtils.act with React.act
+jest.mock('react-dom/test-utils', () => {
+ const originalModule = jest.requireActual('react-dom/test-utils');
+ return {
+ ...originalModule,
+ act: act,
+ };
+});
+
 const noop = () => {};
 Object.defineProperty(window, 'scrollTo', { value: noop, writable: true });
 Object.defineProperty(window, 'localStorage', { value: localStorageMock });

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -48,8 +48,8 @@
  "fuels": "pr-2479",
  "json-rpc-2.0": "1.7.0",
  "lodash.debounce": "4.0.8",
- "react": "18.2.0",
- "react-dom": "18.2.0",
+ "react": "18.3.1",
+ "react-dom": "18.3.1",
  "react-helmet": "6.1.0",
  "react-hook-form": "7.47.0",
  "react-json-view": "1.21.3",
@@ -87,9 +87,9 @@
  "@testing-library/react": "14.0.0",
  "@types/chrome": "0.0.246",
  "@types/lodash.debounce": "4.0.7",
- "@types/react": "18.2.28",
+ "@types/react": "18.3.3",
  "@types/react-custom-scroll": "5.0.1",
- "@types/react-dom": "18.2.13",
+ "@types/react-dom": "18.3.0",
  "@types/react-helmet": "6.1.7",
  "@vitejs/plugin-react": "4.1.0",
  "@xstate/inspect": "0.8.0",

diff --git a/packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.test.tsx b/packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.test.tsx
@@ -1,12 +1,13 @@
 import { screen, testA11y } from '@fuel-ui/test-utils';
 import { fireEvent } from '@storybook/testing-library';
-import { act } from 'react-dom/test-utils';
+
 import { TestWrapper, shortAddress } from '~/systems/Core';
 import { renderWithProvider } from '~/systems/Core/__tests__/utils';
 
 import { MOCK_ACCOUNTS } from '../../__mocks__';
 
 import { Address } from 'fuels';
+import { act } from 'react';
 import { BalanceWidget } from './BalanceWidget';
 
 const ACCOUNT = {

diff --git a/packages/app/src/systems/Asset/components/AssetSelect/AssetSelect.test.tsx b/packages/app/src/systems/Asset/components/AssetSelect/AssetSelect.test.tsx
@@ -1,5 +1,5 @@
-import { act, fireEvent, render, screen } from '@fuel-ui/test-utils';
-import { useState } from 'react';
+import { fireEvent, render, screen } from '@fuel-ui/test-utils';
+import { act, useState } from 'react';
 import { TestWrapper } from '~/systems/Core';
 
 import { MOCK_ASSETS_AMOUNTS } from '../../__mocks__/assets';

diff --git a/packages/app/src/systems/Core/components/ControlledField/ControlledField.test.tsx b/packages/app/src/systems/Core/components/ControlledField/ControlledField.test.tsx
@@ -1,9 +1,10 @@
 import { Button, Input } from '@fuel-ui/react';
-import { act, fireEvent, render, screen, waitFor } from '@fuel-ui/test-utils';
+import { fireEvent, render, screen, waitFor } from '@fuel-ui/test-utils';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
+import { act } from 'react';
 import type { ControlledFieldProps } from './ControlledField';
 import { ControlledField } from './ControlledField';
 

diff --git a/packages/app/src/systems/Home/components/UserAddressCard/UserAddressCard.test.tsx b/packages/app/src/systems/Home/components/UserAddressCard/UserAddressCard.test.tsx
@@ -1,6 +1,7 @@
-import { act, render, screen } from '@fuel-ui/test-utils';
+import { render, screen } from '@fuel-ui/test-utils';
 import { TestWrapper } from '~/systems/Core';
 
+import { act } from 'react';
 import { UserAddressCard } from '.';
 
 const TEST_ACCOUNT =

diff --git a/packages/app/src/systems/Network/components/NetworkSelector/NetworkSelector.test.tsx b/packages/app/src/systems/Network/components/NetworkSelector/NetworkSelector.test.tsx
@@ -1,8 +1,9 @@
-import { act, render, screen, testA11y } from '@fuel-ui/test-utils';
+import { render, screen, testA11y } from '@fuel-ui/test-utils';
 import { configure } from '@testing-library/react';
 import { TestWrapper } from '~/systems/Core/components/TestWrapper';
 import { MOCK_NETWORKS } from '~/systems/Network/__mocks__/networks';
 
+import { act } from 'react';
 import { NetworkSelector } from './NetworkSelector';
 
 const SELECTED = MOCK_NETWORKS[0];

diff --git a/packages/app/src/systems/SignUp/components/MnemonicWrite/MnemonicWrite.test.tsx b/packages/app/src/systems/SignUp/components/MnemonicWrite/MnemonicWrite.test.tsx
@@ -1,13 +1,13 @@
 import { screen, waitFor } from '@fuel-ui/test-utils';
 import { Mnemonic as FuelMnemonic } from 'fuels';
-import { act } from 'react-dom/test-utils';
 import { MNEMONIC_SIZE } from '~/config';
 import type { TestWrapperProps } from '~/systems/Core';
 import { TestWrapper, getPhraseFromValue } from '~/systems/Core';
 import { renderWithProvider } from '~/systems/Core/__tests__';
 
 import { SignUpProvider } from '../SignUpProvider';
 
+import { act } from 'react';
 import { MnemonicWrite } from './MnemonicWrite';
 
 const onFilledHandler = jest.fn();

diff --git a/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.test.tsx b/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.test.tsx
@@ -1,11 +1,11 @@
 import { render, screen, testA11y } from '@fuel-ui/test-utils';
 import { fireEvent } from '@storybook/testing-library';
 import { Address } from 'fuels';
-import { act } from 'react-dom/test-utils';
 import { Pages, TestWrapper, shortAddress } from '~/systems/Core';
 
 import { MOCK_TRANSACTION_CONTRACT_CALL } from '../../__mocks__/tx';
 
+import { act } from 'react';
 import { ActivityItem } from './ActivityItem';
 
 const ownerAddress =

diff --git a/packages/app/src/systems/Transaction/components/TxHeader/TxHeader.test.tsx b/packages/app/src/systems/Transaction/components/TxHeader/TxHeader.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, testA11y } from '@fuel-ui/test-utils';
+import { fireEvent, render, screen, testA11y } from '@fuel-ui/test-utils';
 import { TransactionStatus } from 'fuels';
 import { VITE_EXPLORER_URL } from '~/config';
 import { urlJoin } from '~/systems/Core';
@@ -8,6 +8,7 @@ import {
  MOCK_TRANSACTION_SCRIPT,
 } from '../../__mocks__/transaction';
 
+import { act } from 'react';
 import { TxHeader } from './TxHeader';
 
 describe('TxHeader', () => {

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -53,7 +53,7 @@
  "@types/node": "20.12.11",
  "@types/prettier": "2.7.3",
  "@types/prismjs": "^1.26.1",
- "@types/react": "18.3.1",
+ "@types/react": "18.3.3",
  "@types/react-dom": "18.3.0",
  "@types/react-syntax-highlighter": "^15.5.8",
  "next-images": "1.8.5",

diff --git a/packages/e2e-contract-tests/package.json b/packages/e2e-contract-tests/package.json
@@ -15,8 +15,8 @@
  "@fuels/react": "0.21.0",
  "@tanstack/react-query": "5.28.4",
  "fuels": "pr-2479",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "18.3.1",
+ "react-dom": "18.3.1",
  "react-error-boundary": "^4.0.11",
  "react-hot-toast": "^2.4.1"
  },
@@ -26,8 +26,8 @@
  "@playwright/test": "^1.39.0",
  "@types/chrome": "^0.0.246",
  "@types/node": "^20.8.4",
- "@types/react": "^18.2.28",
- "@types/react-dom": "^18.2.13",
+ "@types/react": "18.3.3",
+ "@types/react-dom": "18.3.0",
  "@typescript-eslint/eslint-plugin": "^6.7.5",
  "@typescript-eslint/parser": "^6.7.5",
  "@vitejs/plugin-react": "^4.1.0",