tests: add redux store to ens test

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 (
     <SafeThemeProvider mode={themeMode}>
       {(safeTheme: Theme) => (

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<RootState>;
+};
 /**
  * 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(
     <SafeProvider loader={<div>loading...</div>}>
-      <TestENSComponent addressesToLookup={props.addressesToLookup} ensNamesToResolve={props.ensNamesToResolve} />
+      <ReduxProvider store={store}>
+        <TestENSComponent addressesToLookup={props.addressesToLookup} ensNamesToResolve={props.ensNamesToResolve} />
+      </ReduxProvider>
     </SafeProvider>,
     { container },
   );
+};
 
 let container: HTMLDivElement | null = null;
 

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(

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;

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<typeof store.getState>;
-
-export type AppDispatch = typeof store.dispatch;
+export const makeStore = (initialState?: Record<string, any>) =>
+  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<ReturnType<typeof makeStore>["getState"]>;
+
+export type AppDispatch = ReturnType<typeof makeStore>["dispatch"];
 
 export type AppListenerEffectAPI = ListenerEffectAPI<RootState, AppDispatch>;
 

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";