Jestからvitestへの移行 #224

mongolyy · 2024-06-04T17:34:00Z

test/app/users/id/page.test.tsx

mongolyy · 2024-06-10T12:06:26Z

package.json

-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",


canaryにすると、ビルドのタイミングで使用されるコードが変化する可能性があるので、バージョンを固定

また、非同期コンポーネントのテストについて、canaryと19 rcで動くようだったので、19 rcを使用しています
testing-library/react-testing-library#1209 (comment)

mongolyy · 2024-06-10T12:12:00Z

test/app/api/auth/nextauth/authOptions.test.ts

+  process.env.AZURE_AD_B2C_TENANT_NAME = 'tenantNameAADB2C'
+  process.env.AZURE_AD_B2C_CLIENT_ID = 'clientIdAADB2C'
+  process.env.AZURE_AD_B2C_CLIENT_SECRET = 'clientSecretAADB2C'
+  process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW = 'primaryUserFlowAADB2C'


beforeEachしたときに初期化されず、beforeEachから出したら初期化されるようになりました
beforeEachから出しています

vitestだとstubEnvという環境変数を制御するAPIが用意されているようなので、使えるといいかもと思いました

mongolyy · 2024-06-10T12:17:52Z

test/app/api/auth/nextauth/route.test.ts

-
-    expectedExisted
-      ? expect(handler[method]).not.toBeUndefined()
-      : expect(handler[method]).toBeUndefined()


vitestの仕様で、requireを使うのが難しく、importを使う必要がありました
importを使うと型情報が入ってきてしまい、この書き方をするときにts-ignoreの必要がありました

このテストについて、関数が定義されているかどうかのテストであり、実質buildすれば確認できる内容だったので削除しました

mongolyy · 2024-06-10T12:21:35Z

test/app/books/id/actions.test.ts

-jest.mock('next/navigation', () => ({
-  __esModule: true,
-  redirect: () => redirectMock(),
-}))


他のテストコードも同様ですが、もともとmockはdescribe内で定義していたと思います
グローバルな場所で宣言しているよりはdescribe内にある方がテスト内で使われることがわかりやすいと感じたので、移動させました

mongolyy · 2024-06-10T12:22:49Z

test/app/books/id/lendingList.test.tsx

@@ -37,12 +41,16 @@ describe('LendingList Component', () => {

  it('貸出中のユーザーがいる場合、その一覧が返却予定日の昇順で表示される', async () => {
    // @ts-ignore
-    prismaLendingHistoryMock.mockResolvedValueOnce(expectedLendingHistories)
+    prismaLendingHistoryMock.mockResolvedValue(expectedLendingHistories)


よくわかっていないのですが、vitestに書き換えるときにxxxOnceにしても挙動は変えられず、xxxだと挙動が帰られたので変更しています
他の行も同様です

mongolyy · 2024-06-10T12:25:19Z

test/app/books/id/bookDetail.test.tsx

-describe('BookDetail component', () => {
-  const BookDetailComponent = require('@/app/books/[id]/bookDetail').default
+describe('BookDetail component', async () => {
+  const BookDetailComponent = (await import('@/app/books/[id]/bookDetail')).default


他も同様ですが、test対象のコンポーネントはawait importでimportしています
https://vitest.dev/api/vi#vi-hoisted

mongolyy · 2024-06-10T12:27:00Z

test/app/books/id/page.test.tsx

+    render(
+      <Suspense>
+        <BookDetailPage params={{ id: book.id.toString() }} />
+      </Suspense>,


async componentのテストの書き方はまだ公式に認められたものはなさそうです
ただ、今後でラップするタイプが標準になりそうだったので、それに追従しています
testing-library/react-testing-library#1209 (comment)

mongolyy · 2024-06-10T12:28:08Z

tsconfig.json

@@ -13,7 +13,7 @@
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",


nodeのままだと動かなかったので修正しています

katakoto291 · 2024-06-22T15:08:37Z

test/app/api/auth/nextauth/authOptions.test.ts

+  process.env.AZURE_AD_B2C_TENANT_NAME = 'tenantNameAADB2C'
+  process.env.AZURE_AD_B2C_CLIENT_ID = 'clientIdAADB2C'
+  process.env.AZURE_AD_B2C_CLIENT_SECRET = 'clientSecretAADB2C'
+  process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW = 'primaryUserFlowAADB2C'


vitestだとstubEnvという環境変数を制御するAPIが用意されているようなので、使えるといいかもと思いました

test/app/books/id/bookDetail.test.tsx

test/app/books/register/addBookDiv.test.tsx

test/app/books/register/bookForm.test.tsx

test/app/books/register/searchedBook.test.tsx

test/app/users/userCard.test.tsx

test/components/userAvatar.test.tsx

vitest.setup.ts

test/components/bookTile.test.tsx

mongolyy · 2024-07-07T08:09:09Z

vitestだとstubEnvという環境変数を制御するAPIが用意されているようなので、使えるといいかもと思いました

ありがとうございます！
対応しました 3612538

katakoto291

ご対応ありがとうございます！！

mongolyy added 8 commits June 3, 2024 21:23

vitestの追加とjestの削除

ac66d6e

vitestの修正

17e23f2

一部のテストを修正

379f55b

一部のテストを修正

4b7de0c

テストの書き方を改善

a358d15

テストの修正

69ead12

_esModuleの記述が不要なので削除

753f2eb

mockの宣言位置を変更

a193860

mongolyy changed the title ~~[WIP] Feature/219 migrate to vitest~~ [WIP] Jestからvitestへの移行 Jun 4, 2024

mongolyy added 2 commits June 5, 2024 19:25

jsdomへの変更

1d67e8b

tscのエラーに対応

dbbaa5b

github-advanced-security bot found potential problems Jun 5, 2024

View reviewed changes

test/app/users/id/page.test.tsx Fixed Show fixed Hide fixed

mongolyy added 4 commits June 5, 2024 21:56

テストの書き方を統一

1d99b76

URLをUrlObjectに変更

0c5f39a

Merge branch 'main' into feature/219_migrate-to-vitest

74e0b4b

yarn installしてyarn.lockの不整合を解消

a36274a

mongolyy commented Jun 10, 2024

View reviewed changes

不要なコメントを削除

6f13b64

mongolyy commented Jun 10, 2024

View reviewed changes

mongolyy added 2 commits June 10, 2024 21:34

buildのエラーに対応

40b7bf8

vitestの型情報を追加

77331c5

mongolyy changed the title ~~[WIP] Jestからvitestへの移行~~ Jestからvitestへの移行 Jun 10, 2024

mongolyy marked this pull request as ready for review June 10, 2024 12:36

mongolyy requested a review from a team as a code owner June 10, 2024 12:36

mongolyy requested a review from katakoto291 June 10, 2024 12:36

katakoto291 reviewed Jun 22, 2024

View reviewed changes

mongolyy self-assigned this Jun 30, 2024

mongolyy added 13 commits June 30, 2024 12:08

vi.stubEnvを使用するように変更

3612538

モックの宣言位置を変更

6084c59

await importを使う必要がなかったので、普通のimportの使用に変更

2c7082d

mockの宣言をdescribe内に移動

cbdfa4a

不要なmockを削除

3325444

Merge branch 'main' into feature/219_migrate-to-vitest

ab5c6d0

lockファイルを更新

69ac9fa

Merge branch 'main' into feature/219_migrate-to-vitest

13c2599

lockファイルを更新

f84754c

typeCheckのエラーに対応

8cf0584

biomeのエラーに対応

22d2623

assertに統一する

3a29830

vitest.setupとconfigの改善

3dd4faa

mongolyy added 2 commits July 7, 2024 17:28

next/imageのmockを削除

ca42b24

yarn lint:fix

cbdf4f7

mongolyy requested a review from katakoto291 July 7, 2024 08:32

katakoto291 approved these changes Jul 7, 2024

View reviewed changes

mongolyy merged commit 78677bc into company-library:main Jul 7, 2024
6 checks passed

mongolyy deleted the feature/219_migrate-to-vitest branch July 7, 2024 10:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jestからvitestへの移行 #224

Jestからvitestへの移行 #224

mongolyy commented Jun 4, 2024 •

edited

Loading

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

katakoto291 Jun 22, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

mongolyy Jun 10, 2024

katakoto291 Jun 22, 2024

mongolyy commented Jul 7, 2024

katakoto291 left a comment

Jestからvitestへの移行 #224

Jestからvitestへの移行 #224

Conversation

mongolyy commented Jun 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mongolyy commented Jul 7, 2024

katakoto291 left a comment

Choose a reason for hiding this comment

mongolyy commented Jun 4, 2024 •

edited

Loading