diff --git a/src/AppWrapper.tsx b/src/AppWrapper.tsx index c0373bb4..a6068b32 100644 --- a/src/AppWrapper.tsx +++ b/src/AppWrapper.tsx @@ -7,12 +7,14 @@ import App from "./App"; import { AppInitializer } from "./AppInitializer"; import { useDarkMode } from "./hooks/useDarkMode"; import errorIcon from "./static/error-icon.svg"; -import { store } from "./stores/store"; +import { makeStore } from "./stores/store"; export const AppWrapper = () => { const isDarkMode = useDarkMode(); const themeMode = isDarkMode ? "dark" : "light"; + const store = makeStore(); + return ( {(safeTheme: Theme) => ( diff --git a/src/__tests__/hooks/ens.test.tsx b/src/__tests__/hooks/ens.test.tsx index 69dc5023..c3441039 100644 --- a/src/__tests__/hooks/ens.test.tsx +++ b/src/__tests__/hooks/ens.test.tsx @@ -5,12 +5,18 @@ import { ethers } from "ethers"; import React, { useEffect, useState } from "react"; import { unmountComponentAtNode } from "react-dom"; import { act } from "react-dom/test-utils"; +import { Provider as ReduxProvider } from "react-redux"; +import { makeStore, RootState } from "src/stores/store"; import { useEnsResolver } from "../../hooks/useEnsResolver"; import { sendSafeInfo, setupMocksForSafeProvider } from "../../test/safeUtil"; import { testData } from "../../test/util"; -type TestENSComponentProps = { ensNamesToResolve?: string[]; addressesToLookup?: string[] }; +type TestENSComponentProps = { + ensNamesToResolve?: string[]; + addressesToLookup?: string[]; + initialReduxState?: Partial; +}; /** * Small component which executes some hook functions and puts the results in the dom. */ @@ -71,13 +77,18 @@ const TestENSComponent = (props: TestENSComponentProps): JSX.Element => { ); }; -const renderTestComponent = (container: HTMLElement, props: TestENSComponentProps = {}) => - render( +const renderTestComponent = (container: HTMLElement, props: TestENSComponentProps = {}) => { + const store = makeStore(props.initialReduxState); + + return render( loading...}> - + + + , { container }, ); +}; let container: HTMLDivElement | null = null; diff --git a/src/hooks/useEnsResolver.ts b/src/hooks/useEnsResolver.ts index 12f8479e..85e57fdf 100644 --- a/src/hooks/useEnsResolver.ts +++ b/src/hooks/useEnsResolver.ts @@ -42,7 +42,7 @@ export const useEnsResolver: () => EnsResolver = () => { const lookupAddress = useCallback( async (address: string) => { const nameFromAb = addressbook.find((abItem) => { - return abItem.address.toLowerCase() === address.toLowerCase() && abItem.chainId === safe.chainId.toString(); + return abItem.address.toLowerCase() === address.toLowerCase() && abItem.chainId === safe?.chainId.toString(); })?.name; if (nameFromAb) { @@ -51,7 +51,7 @@ export const useEnsResolver: () => EnsResolver = () => { return await web3Provider.lookupAddress(address); }, - [addressbook, safe.chainId, web3Provider], + [addressbook, safe?.chainId, web3Provider], ); const cachedResolveName = useCallback( diff --git a/src/setupTests.ts b/src/setupTests.ts index f7ce1c19..92b0c558 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -25,3 +25,7 @@ function getRandomValues(buf: Uint8Array) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore window.crypto = { getRandomValues }; + +const { TextEncoder, TextDecoder } = require("util"); +window.TextEncoder = TextEncoder; +window.TextDecoder = TextDecoder; diff --git a/src/stores/store.ts b/src/stores/store.ts index ea4e42c3..fa1cae38 100644 --- a/src/stores/store.ts +++ b/src/stores/store.ts @@ -5,7 +5,6 @@ import { TypedAddListener, TypedStartListening, } from "@reduxjs/toolkit"; -import { setupListeners } from "@reduxjs/toolkit/dist/query"; import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import addressBookReducer from "./slices/addressbookSlice"; @@ -20,24 +19,24 @@ const listenerMiddlewareInstance = createListenerMiddleware({ onError: () => console.error, }); -export const store = configureStore({ - reducer: { - csvEditor: csvReducer, - messages: messageReducer, - safeInfo: safeInfoReducer, - networks: networksReducer, - collectibles: collectiblesReducer, - assetBalance: assetBalanceReducer, - addressbook: addressBookReducer, - }, - middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddlewareInstance.middleware), -}); - -setupListeners(store.dispatch); - -export type RootState = ReturnType; - -export type AppDispatch = typeof store.dispatch; +export const makeStore = (initialState?: Record) => + configureStore({ + reducer: { + csvEditor: csvReducer, + messages: messageReducer, + safeInfo: safeInfoReducer, + networks: networksReducer, + collectibles: collectiblesReducer, + assetBalance: assetBalanceReducer, + addressbook: addressBookReducer, + }, + middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddlewareInstance.middleware), + preloadedState: initialState, + }); + +export type RootState = ReturnType["getState"]>; + +export type AppDispatch = ReturnType["dispatch"]; export type AppListenerEffectAPI = ListenerEffectAPI; diff --git a/src/test/safeUtil.ts b/src/test/safeUtil.ts index 3b659a99..566513fd 100644 --- a/src/test/safeUtil.ts +++ b/src/test/safeUtil.ts @@ -1,4 +1,4 @@ -import { SafeInfo } from "@safe-global/safe-apps-sdk"; +import { PostMessageOptions, SafeInfo } from "@safe-global/safe-apps-sdk"; import React from "react"; import { act } from "react-dom/test-utils";