メモです。 Viteの導入 $ pnpm create vite 画面表示したがってReactやTypeScriptを選ぶ。+ SWCを選んでも良い。SWCはRust製の高速なバンドラらしい。 Vitestとtesting-libraryの導入 $ pnpm add -D vitest jsdom @testing-library/react @testing-library/j…

前回読んだ記事は抽象化しすぎというかDRYにしすぎることを戒める記事だったけど、この記事はそれとともに全く抽象化しないのも駄目だという記事。 この記事にあるAHAというのはAvoid Hasty Abstractionの略で、「性急な抽象化を避けよ」という意味らしい。 …

describeによるネストを避けようという記事。 なんだけど、ネストも問題だけどbeforeEachやスコープの広い変数の使いすぎを戒める点の方が強い気がした。 このあたりは 【初心者向け】テストコードの方針を考える（何をテストすべきか？どんなテストを書くべ…

テストは他のテストに影響を与えないようにちゃんと分離しましょうという記事。 先行するテストに依存してはいけない。(例えば先行するテストでrenderしといて後続でそれを利用するとか。変数セットしといて後のやつが利用するとか。) この記事でも、テスト…

テストを書くときに「1テスト1アサーションにこだわる必要はないよ、長くなっても大丈夫だよ」という記事。 それが提唱されたのは昔はテストが失敗したときに出される情報が少なかったらだとか。 つまり、複数アサーションを書いてるとどのアサーションが失…

const user = userEvent.setup(); render(<Component />); const link = screen.getByRole("link"); await user.click(link) expect(...) のようなコードを書いていたらタイトルのようなWarningが出た。 割とよくあることなのか解決方法も同時に出てstateを更新するイベン</component>…

node_modules/jsdom/lib/jsdom/browser/Window.js:376 return idlUtils.wrapperForImpl(idlUtils.implForWrapper(window._document)._location); ^ TypeError: Cannot read properties of null (reading '_location') React + Jestでテストを書いているとこ…

import { render, screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import { useEffect } from 'react'; function Heading({ callback }: { callback: () => void }) { useEffect(() => { async function f() { awai…