🙄

【React】フロントエンドのテストって何するの?

2 min read

テストってなんで書くの?

こんな悩みはありませんか?

  • 書いたコードに予期せぬバグがあるのではと心配になり、夜も眠れない
  • 変更後に致命的なバグが突然発生する悪い夢にうなされる

テストの目的

  • 「想定通りに動くのか」を担保するため
  • 開発者自身のため
  • 変更に強い仕様書をつくる

テストってどうやってを書くの?

Testing Torophy

  • JSテスト界の大御所Kent.Cが提唱するテストのコンセプト
  • 体積が大きいところほど重要であるとしている(ここではIntegrationが最も大きい)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/16c8cc69-2e11-9fbf-5ac8-158943e082fd.png" width="550">

トレードオフの発生

  • テストの実行スピード
  • 工数
  • カバレッジ

<img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F82363%2Fda49f860-4296-9ab4-cc08-186ecc8888ad.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=350ca04cddac9646515b2f4a526d9df0" width="700">

Kent.Cの方針

<img src="https://kentcdodds.com/static/kent-985f8a0db8a37e47da2c07080cffa865.png" width="250">
Kent.Cがtesting-libraryのドキュメント内で言っていたこと。

  • テストはアプリケーションの利用方法に似ているほど信頼性が得られるのさ
  • 実装の詳細をテストしないことを勧めるよ(実施してもいいけどね)

テストって何を書けばいいの?

実際に書いてみる

テスト対象: Incrementボタンを押すと、数字が1増えて表示される。(初期表示は0)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/de2c54e1-b76b-06b9-1d92-420e258ed729.png" width="200">

export function Counter() {
  const [count, setCount] = useState(0);
  const increment() {
    setCount(count + 1);
  }
  return (
    <>
      <div>Number: {count}</div>
      <div>
        <button onClick={increment}>Increment</button>
      </div>
    </>
  )
}

実際に書いてみる

仕様ライブラリ: Jest, react-testing-library
テスト内容:

  • 初期表示はNumber: 0
  • Increamentボタンを押すと数字が1つ増える
import { fireEvent, render, screen } from "@testing-library/react"
import { Counter } from "./"

describe("Counter", () => {
  test("render", () => {
    render(<Counter />)
    expect(screen.getByText('Number: 0')).toBeInTheDocument();
  })
  test("increment", () => {
    render(<Counter />)
    const button = screen.getByText("Increment")
    fireEvent.click(button)
    screen.getByText("Number: 1")
  })
})

なるほどこれは仕様書になる...!

Reactで優先的に書くべきテスト

  • ロジックがあるor少し複雑なUIコンポーネントのIntegration Test
  • Custom Hooksなどの切り出されたロジックのUnit Test

ロジックが複雑でバグが出やすそう...
ここが壊れたらヤバい!不安で夜も眠れない...
そんな不安を解消してくれそうな部分からテストを書きましょう。

はじめてテストをやってみて

感想・気づき

  • サーバーサイドのテストとはまた違った難しさがある
  • Integration Testをしっかり書けば仕様書になる
  • E2EテストのCypressも触ってみたい

「複業クラウド」について

弊社Another worksでは複業マッチングプラットフォーム「複業クラウド」を開発しています!

▼複業でスキルを活かしてみませんか?複業クラウドの登録はこちら!

https://talent.aw-anotherworks.com/?login_type=none

Discussion

ログインするとコメントできます