React 组件测试 - `useClient` 必须在 `WagmiConfig` 中使用

Question

Next.js app/TypeScript、Jest/React 测试库。我想测试我的组件，但是当我在测试用例中渲染它时，出现以下错误。

`useClient` must be used within `WagmiConfig`.

Read more: https://wagmi.sh/docs/WagmiConfig

  34 |   const [isValidPath, setIsValidPath] = React.useState(false);
  35 |
> 36 |   const { address } = useAccount();
     |                                 ^
  37 |
  38 |   const [currentConnectedAddress, setcurrentConnectedAddress] = useState("");
  39 |

useAccount 钩子来自“wagmi”库。该库有一个配置组件（WagmiConfig）。这将子组件包装在 _app.tsx 中。我该如何修复这个错误？我尝试再次首先渲染 _app.tsx，但这也给出了错误。

_app.tsx

const MyApp = ({
  Component,
  pageProps,
}: AppProps) => {

  const client = new QueryClient();
  return (
    <div className="flex flex-row ">
      <StoreProvider store={store}>
        <SessionProvider session={pageProps?.session} refetchInterval={0}>
          <QueryClientProvider client={client}>
            *<WagmiConfig client={_client}>*
              <MarketProvider>
                <Component {...pageProps} />
                <ToastContainer
                  position="top-right"
                  autoClose={1500}
                  hideProgressBar={true}
                  newestOnTop={false}
                  closeOnClick
                  rtl={false}
                  pauseOnFocusLoss={false}
                  draggable
                  pauseOnHover={false}
                />
                {/* <ReactQueryDevtools /> */}
              </MarketProvider>
            </WagmiConfig>
          </QueryClientProvider>
        </SessionProvider>
      </StoreProvider>
    </div>
  );

}

Answer 1

尝试将整个应用程序组件包装在index.js中：

< WagmiConfig >
    <...other component/> 
    <App/>
<WagmiConfig/>

它对我有帮助。

Answer 2

对于未来的搜索者，只需添加它，以防您使用 monorepo（在我的例子中为 Turborepo），我在包文件夹中拥有我的

WagmiConfig

上下文。我不知道这是否是

wagmi

、

viem

rainbowkit

或

turborepo

本身的问题，但我将

WagmiConfig

移回我的应用程序上下文，它开始工作。

TLDR ：将

packages/context/WagmiConfig

移至

apps/your-app-name/context

希望这有帮助。