ChakraUI v3でJestを実行するとContextError: useContext returned `undefined`. Seems you forgot to wrap component within <ChakraProvider />エラーが出る

はじめに

ChakraUI v3に伴ってJestでエラーがでるようになったのでまとめます

問題

テストを実行すると以下のエラーが出ます

 ContextError: useContext returned `undefined`. Seems you forgot to wrap component within <ChakraProvider />

       5 | describe("title", () => {
       6 |   it("should render title", () => {
    >  7 |     render(<App />);
         |           ^
       8 |     expect(screen.getByText("Hello World")).toBeInTheDocument();
       9 |   });
      10 | });

      at node_modules/@chakra-ui/react/dist/cjs/styled-system/factory.cjs:97:47
      at node_modules/@emotion/react/dist/emotion-element-832b737b.browser.cjs.js:72:12
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:15486:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:19245:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21675:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27465:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26599:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26505:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26473:7)
      at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25889:20)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25789:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:47:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (node_modules/@testing-library/react/dist/pure.js:271:10)
      at Object.<anonymous> (src/tests/AppComponent.test.tsx:7:11)

Test Suites: 1 failed, 1 total

解決方法

renderでChakraProviderで囲むことでうまく行きました

import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
import App from "../App";
import { render, screen } from "@testing-library/react";

describe("title", () => {
  it("should render title", () => {
    render(
      <ChakraProvider value={defaultSystem}>
        <App />
      </ChakraProvider>
    );
    expect(screen.getByText("Hello World")).toBeInTheDocument();
  });
});

以前は、defaultSystemというのを渡していませんでしたが、v3から渡す必要があるようです
詳しくは<Provider>の中をみてください

おわりに

大きな仕様変更があるのでまだなれませんががんばります