How to test for a global Toast/Snackbar with React Testing Library

Viewed 1100

I have a material-ui Snackbar component in my root pages/_app file in my project. If a suitable event happens on any component in my project, it dispatches an action to redux to update the "alert" state of my store, which triggers the Snackbar to appear.

What source of approach can I use to run tests on a component level to track that relevant (and important) toast/snackbar messages appear due to events? Is this possible within the confines of react-testing-library?

tests for a given component interacting with snackbar

import { render } from "@testing-library/react"; 
import user from "@testing-library/user-event";

describe("if the url is invalid", () => {
  beforeEach(() => {
    render(<SelectMedia />);
    user.click(screen.getByRole("button", { name: /search/i }));
  });

  test("the VideoPlayer does not activate", () => {
    expect(screen.getByTestId())
  });
  test.todo("a warning toast message appears");
  // ^ what can I do to make tests like these work?
});

root app

const myApp = () => {
...
return (
    <Provider store={store}>
      <StyledSnackBar />
      <Component {...pageProps} />
      // ^ all components (like SelectMedia) exist within <Component ... />
    </Provider>
  )
}
  • toast/snackbar does not exist within the <SelectMedia /> component
  • toast/snackbar exists on a root page as a sibling and uses redux to trigger behavior
0 Answers
Related