@testing-library/dom#queryByTestId JavaScript Examples

The following examples show how to use @testing-library/dom#queryByTestId. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Dashboard.test.js    From viade_en1b with MIT License 6 votes vote down vote up 
describe("Dashboard Component", () => {
  let wrapper;
  const mockFn = jest.fn();
  beforeEach(() => {
    const initState = {
      route: {},
      auth: {},
      user: {},
      control: {},
    };
    const store = testStore(rootReducer, initState);
    const { container } = render(
      <Provider store={store}>
        <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
          <HashRouter>
            <Dashboard
              routes={[]}
              selectedRoute={""}
              showRoute={() => mockFn}
            ></Dashboard>
          </HashRouter>
        </IntlProvider>
      </Provider>
    );
    wrapper = container;
  });

  test("renders correctly", () => {
    waitForElement(() => {
      expect(queryByTestId(wrapper, "dashboard-container")).not.toBeNull();
    });
  });
});
Example #2
Source File: RouteList.test.js    From viade_en1b with MIT License 6 votes vote down vote up 
describe("The components are rendered correctly", () => {
  describe("Component renders", () => {
    let wrapper;
    const mockRoute = getRoute0();
    const mockFunc = jest.fn();
    beforeEach(() => {
      const props = {
        key: mockRoute.id,
        routes: [{ mockRoute }],
        onClick: mockFunc,
      };
      const { container, rerender } = render(
        <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
          <RouteList {...props}></RouteList>
        </IntlProvider>
      );
      wrapper = container;
    });

    describe("Components are rendered", () => {
      test("routes render", () => {
        expect(wrapper.routes).not.toBeNull();
      });
      test("summaries render", () => {
        expect(wrapper.summaries).not.toBeNull();
      });
      test("Div renders", () => {
        expect(queryByTestId(wrapper, "route-list-div")).not.toBeNull();
      });
    });
  });
});
Example #3
Source File: RouteSummary.test.js    From viade_en1b with MIT License 6 votes vote down vote up 
describe("RouteSummary Component", () => {
  describe("Component Renders", () => {
    let wrapper;
    const mockRoute = getRoute0();
    const mockFunc = jest.fn();
    beforeEach(() => {
      const props = {
        key: mockRoute.id,
        route: mockRoute,
        onClickHandle: mockFunc,
      };
      const { container, rerender } = render(
        <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
          <RouteSummary {...props}></RouteSummary>
        </IntlProvider>
      );
      wrapper = container;
    });

    describe("Should renders without error", () => {
      test("card is rendered correctly", () => {
        expect(queryByTestId(wrapper, "route-summary-card")).not.toBeNull();
      });
      test("title is rendered correctly", () => {
        expect(queryByTestId(wrapper, "route-summary-title")).not.toBeNull();
      });
      test("subtitle is rendered correctly", () => {
        expect(queryByTestId(wrapper, "route-summary-subtitle")).not.toBeNull();
      });
    });

    test("Function should be called", () => {
      let card = queryByTestId(wrapper, "route-summary-card");
      fireEvent.click(card);
      expect(mockFunc).toBeCalled();
    });
  });
});