新）Testing Library

[shari-sushi]

ReactでTesting Library/Jestを使ってテストを学ぼう https://reffect.co.jp/react/react-test#google_vignette

[shari-sushi]

関数

• debug

• render debugアクション(後述)

---

https://www.ey-office.com/blog_archive/2023/06/07/got-stuck-in-the-test-environment-of-react-components-made-with-vitest-and-react-testing-library/

Providerはrenderのwrapperオプションが便利 テストコード内でコンポーネントのレンダーはrender();のようにrender関数で行いますが、当然RecoilのProviderが無いのでエラーになります。 render();のように書けば動きますが、複数のProviderを使っている場合やそのオプションがある場合は、テストコードが無意味に長くなりよくありません。

このような場合は以下のように、render関数のwrapperオプションが便利です（wrapperコンポーネントは他のテストコードでも使うでしょうから、別ファイルにした方がよいですね）。

type RecoilWrapperProps = {
  children: React.ReactNode;
};
const RecoilWrapper: React.FC<RecoilWrapperProps> = ({children}) => {
  return (
    <RecoilRoot>{children}</RecoilRoot>
  );
}

it( ・・・

   render(<App />, { wrapper: RecoilWrapper });

・・・・