はじめに

ChakraUIがv3に変わってjestが動かなくなる問題があったのでまとめます

問題

ChakraUI v3のコンポーネントを使っている状態でjestを動かすとエラーが出ました

 ● Test suite failed to run

    ReferenceError: structuredClone is not defined

    > 1 | import { Box } from '@chakra-ui/react'
        | ^
      2 |
      3 | function App() {
      4 |

      at node_modules/@chakra-ui/react/dist/cjs/styled-system/token-middleware.cjs:21:25
          at Array.forEach (<anonymous>)
      at Object.transform (node_modules/@chakra-ui/react/dist/cjs/styled-system/token-middleware.cjs:15:12)
      at node_modules/@chakra-ui/react/dist/cjs/styled-system/token-dictionary.cjs:295:20
          at Array.forEach (<anonymous>)
      at applyMiddlewares (node_modules/@chakra-ui/react/dist/cjs/styled-system/token-dictionary.cjs:293:17)
      at build (node_modules/@chakra-ui/react/dist/cjs/styled-system/token-dictionary.cjs:337:5)
      at Object.createTokenDictionary (node_modules/@chakra-ui/react/dist/cjs/styled-system/token-dictionary.cjs:349:3)
      at Object.createSystem (node_modules/@chakra-ui/react/dist/cjs/styled-system/system.cjs:35:34)
      at Object.<anonymous> (node_modules/@chakra-ui/react/dist/cjs/preset.cjs:10:30)
      at Object.<anonymous> (node_modules/@chakra-ui/react/dist/cjs/index.cjs:15:14)
      at Object.<anonymous> (src/App.tsx:1:1)
      at Object.<anonymous> (src/tests/AppComponent.test.tsx:2:1)

解決方法

jestのセットアップのスクリプトに以下を追加しました

jest.setup.ts

if(!global.structuredClone){
  global.structuredClone = function structuredClone(objectToClone: any) {
    if (objectToClone === undefined) return undefined;
    return JSON.parse(JSON.stringify(objectToClone));
  };
}

おわりに

なんとか解決できたので良かったです。