【React】jestのテストでProviderが機能しない症状の解決方法について

はじめに

jestのテストでログイン中にログインボタンが表示されないテストを実装するところでつまずいたので記事にします。

下記のようなエラーでログインボタンが取得されている状態でした。

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "ログイン"

【修正前のコード】

.tsx

beforeEach(async () => {
  render (
    <BrowserRouter>
      <Home />
    </BrowserRouter>
  );
});


//////////その他テスト/////////////////////////



it("ログアウトボタンを押すとログインボタンが表示されていること", async () => {
    const store = createStore();
    store.set(loginAtom, true);

    render(
      <Provider store={store}>
        <BrowserRouter>
          <Home />
        </BrowserRouter>
      </Provider>
    );

    const logoutButton = screen.getByRole("button", { name: "ログアウト" });
    userEvent.click(logoutButton);
    store.set(loginAtom, false);
    await waitFor(() => {
      expect(screen.getByRole("button", { name: "ログイン" })).toBeInTheDocument();
    });
  });

解決方法

beforeEach内のrender削除

参考

おわりに

他のテストで使用していたbeforeEach内のrenderによって、実行させたいtest時にrender内のコンポーネントが混在しているような状態になっていました。