Jestを最新版にバージョンアップ

MofuMofu2 commented 10 months ago

TODO

[x] package.jsonからjestを削除
[x] jestを--save-devオプションでインストール
[x] バージョン28以降からjsdomが消えているため依存関係のライブラリをインストール
[x] テストが通るか試す
[x] ファイル解決の設定を変更

MofuMofu2 commented 10 months ago

インストールで切り戻すもの

npm install --save-dev @types/jest jest jest-resolve jest-watch-typeahead

MofuMofu2 commented 10 months ago

テストを実行すると次のようなエラーとなる。 Jest 28からjest-environment-jsdomが内部の依存関係から切れているためで、--save-devをつけてインストールする。

$ npm run test

> reactjs-sandbox@1.0.0 test
> node scripts/test.js --watchAll=false

● Validation Error:

  Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration

As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

npm install --save-dev jest-environment-jsdom

MofuMofu2 commented 10 months ago

再度テストを通したところ、次のようなエラーになった。これもJest 28からの変更点で、ファイルでCSSやSVGをインポートしている場合はconfig/XXXTransform.jsで名前解決をしている。process()で名前解決をした結果を code : xxxで返すようにAPIが変更されているため対応しないといけない。

 FAIL  src/component/Todo/Todo.test.tsx
  ● Test suite failed to run

    ● Invalid return value:
      `process()` or/and `processAsync()` method of code transformer found at 
      "/Users/mofumofu/git/react-sandbox/config/jest/cssTransform.js" 
      should return an object or a Promise resolving to an object. The object 
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/28.x/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

      1 | import React, { useState } from "react";
      2 |
    > 3 | import "./Todo.modules.css";
        | ^
      4 | import { useRecoilState, useRecoilValue } from "recoil";
      5 |
      6 | import { type TodoList, todoAtom } from "../../store/atom";

      at ScriptTransformer._buildTransformResult (node_modules/@jest/transform/build/ScriptTransformer.js:442:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:554:17)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:674:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:726:19)
      at Object.require (src/component/Todo/Todo.tsx:3:1)
      at Object.require (src/component/Todo/Todo.test.tsx:8:1)

MofuMofu2 / react-sandbox

Jestを最新版にバージョンアップ #95

TODO