「SyntaxError: "undefined" is not valid JSON」の解決方法 ChakraUI Jest React.js TypeScript

はじめに

設定系、config系ファイルにもっと慣れる必要があります。

問題

5日前まで通っていたテストが通らなくなりました。

% npm run test

> sample-vite-ts@0.0.0 test
> jest

  console.error
    Error: Uncaught [SyntaxError: "undefined" is not valid JSON]


~~中略~~

 FAIL  src/tests/AppComponent.spec.tsx
  title
    ✕ should render title (84 ms)

  ● title › should render title

    SyntaxError: "undefined" is not valid JSON
        at JSON.parse (<anonymous>)

      21 |
    > 22 |   return JSON.parse(JSON.stringify(obj));
         |               ^
      23 | };
      24 |
      25 |
      
      at Object.<anonymous>.global.structuredClone (jest.setup.ts:23:15)
~~省略~~

解決方法

jest.setup.ts

import '@testing-library/jest-dom';

require('dotenv').config();

global.structuredClone = (obj) => {
// console.log("jest.setup.ts", obj); // 確認用で追加
// if (obj === undefined) console.log("jest.setup.ts undefined", obj); // 確認用で追加
if (obj === undefined) return undefined; // 追加
  return JSON.parse(JSON.stringify(obj));
};

@Sicut_studyに、解決方法を教えてもらいました。
以下を追加すれば良いとのことでした。

jest.setup.ts

if (obj === undefined) return undefined; // 追加

が、自分なりに解決できるようになる必要があると考え、解決できる方法を追ってみました。
しかし、ドキュメントを調べたり(Jest, TypeScriptなど)、「SyntaxError: "undefined" is not valid JSON」で検索したりしてみたのですが、解決方法が見つかりませんでした。

ふと、jest.setup.tsにconsole.logを仕込んだらどうなるのだろうと思いついて、やってみました。
(jest.setup.tsが問題点であることは、エラー文に出ている、return JSON.parse(JSON.stringify(obj))で検索すればわかります。また、エラーの下にあるstack traceを見てもわかります。)

if (obj === undefined) console.log("jest.setup.ts", obj);

上記を仕込んで、testを実行。

% npm run test

> sample-vite-ts@0.0.0 test
> jest

  console.log
    jest.setup.ts undefined

      at Object.<anonymous>.global.structuredClone (jest.setup.ts:21:34)

 PASS  src/tests/AppComponent.spec.tsx
  title
    ✓ should render title (665 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.861 s, estimated 4 s
Ran all test suites.

エラーはこれだけでした。
これであれば、if (obj === undefined) console.log("jest.setup.ts", obj); を仕込めば解決できることに合点がいきました。

おわりに

setup系ファイルに、console.logが仕込めるのは盲点でした。
エラーがどこで起きているのかの確認と、console.logで何が起きているのかを確認することが大事だと思いました。