モック成分に反応する子供の検証

これは反応テストのシリーズの第3部です.最後の部分で、我々は見ました.
あなたがmocksをしたいかもしれないもう一つのことはそれが正しい子供が通過したテストです.それは我々が今見るものです.
このポストのすべてのコードサンプルは、以下のレポで利用できます.

dirv / コンポーネントをmocking反応

コンポーネントをモックアップする方法の例

私たちは、メーリングリストのサインアップを入力したいと思いますPostContent . 私たちはそれに子供の要素を渡すことによってそれを行うことができます.
ここで新しく改良されたBlogPage コンポーネント

export const BlogPage = ({ url }) => {

  const id = getPostIdFromUrl(url)

  const handleSignUp = () => {
    // ...
  }

  return (
    <PostContent id={id}>
      <input type="email" placeholder="Sign up to my mailing list!" />
      <button onClick={handleSignUp}>Sign up</button>
    </PostContent>
  )
}

我々のBlogPage テストは何を気にかけるべきではないPostContent 子供たちとは.彼らは、それがちょうど子供たちに与えられたことを気にかけるべきです.
我々は、このアウトを引き出すことによってこれをテストすることができますchildren からのprop.mock.calls を入力し、render . 言い換えれば、それはレンダリング支柱のように扱う.
しかし、より簡単な方法がありますchildren :

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(({ children }) => (
    <div data-testid="PostContent">{children}</div>
  ))
}))

今、我々はそれをチェックするテストを書くことができますbutton はPostContent :

it("renders the mailing list sign up button as a child of PostContent", () => {
  render(<BlogPage url="http://example.com/blog/my-web-page" />)

  const postContentElement = screen.getByTestId("PostContent")

  const button = screen.queryByRole(
    "button", { name: "Sign up" })

  expect(postContentElement).toContainElement(button)
})

同じ技術を繰り返すことができるinput フィールド.
このテストを実行すると、問題に気づくでしょう.渡された小道具をチェックする我々の以前のテストは、現在失敗しています.その期待はこうでした.

  expect(PostContent).toHaveBeenCalledWith(
    { id: postId },
    expect.anything())

突然、我々はAを持っていますchildren PROPは、このテストによると予想外です.
私たちはexpect.objectContaining .

期待を使う。テストを絞り込むためのオブジェクト

単一の模擬コンポーネント呼び出しのために複数の単体テストをすることは、しばしば役に立ちます!私は通常、1つのテストでは、すべての小道具を指定して起動します.しかし、十分な複雑さのどんなprop値のためにでも、それは良いテスト記述でそれ自身のテストにそれを分けるのに役に立つことがありえます.The children propはその特別なケースです:我々が正しいIDを通過するチェックがinset内容を表示することに関係する何かから独立しているという我々のテスト.
テストを避けるcontent 使用によってexpect.objectContaining 我々の予想では

  expect(PostContent).toHaveBeenCalledWith(
    expect.objectContaining({ id: postId }),
    expect.anything())

もっとレッスン

それで、我々は現在何を学びましたか?

mockksに渡された子をテストするには、mockコンポーネントを` jest 'に変更します.fn ( (子})={ children })

用途toContainElement からjest-dom Matcherパッケージは、コンポーネントがモンクされたコンポーネントの子として表示されることを確認します.

用途expect.objectContaining あなたの小道具が変わるとき、中断しない単体テストを書くために.

Jestの使用clearMocks 設定は、あなたのスパイは、各テストの前にクリアされるように設定します.

第4部では、私たちがどうやって行こうかを見ます.