@testing-library/react#render JavaScript Examples

The following examples show how to use @testing-library/react#render. 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: Fader.test.js    From expriments_with_react with MIT License 6 votes vote down vote up 
test("should render fader component", () => {
  render(<Fader text="test" />);

  const faderElem = screen.getByTestId("fader");

  expect(faderElem).toBeInTheDocument();
  expect(faderElem).toHaveTextContent("test");
  expect(faderElem).toHaveClass("fade-in");
});
Example #3
Source File: Calculator.test.js    From Encon-fe with MIT License 6 votes vote down vote up 
test('check for text', () => {
  const { getByText } = render(
    <Router>
      <Calculator />
    </Router>
  );
  const register = getByText(/register/i);
  expect(register).toBeInTheDocument();
});
Example #4
Source File: Dashboard.spec.js    From carpal-fe with MIT License 6 votes vote down vote up 
test('Render two image tags',async () => {
    const wrapper = await render(<Dashboard />);
    const image = wrapper.getAllByAltText("Under Construction");


    
    expect(image[0].className).toEqual("show-tablet center")
    expect(image[1].className).toEqual("hide-tablet center")
    expect(image.length).toBe(2);
    expect(image[0].nodeName).toEqual("IMG")
    expect(image[1].nodeName).toEqual("IMG")


})
Example #5
Source File: index.js    From foster-together-fe with MIT License 6 votes vote down vote up 
renderWithReduxAndRouter = ui => {
  return {
    ...render(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>{ui}</BrowserRouter>
        </ThemeProvider>
      </Provider>
    ),
    store,
  }
}
Example #6
Source File: ApplicantOrgInformation.test.js    From grants-fe with MIT License 6 votes vote down vote up 
test("accessible -  orgInformation pass axe", async () => {
  const { container } = render(
    <OrgInformation
      formState={formStateMock}
      formHelperText={formHelperTextMock}
    />
  );
  expect(await axe(container)).toHaveNoViolations();
});
Example #7
Source File: UserEditModalContent.test.js    From neighborhood-chef-fe with MIT License 6 votes vote down vote up 
describe("Test UserEditModal static properties", () => {
  let UserEditModal;
  beforeEach(() => {
      sessionStorage.setItem('user', JSON.stringify({
        address: "address",
        firstName: "firstName",
        lastName: "lastName",
        id: "id",
        gender: "gender"
      }));

      const store = mockStore({});

      UserEditModal = render(
        <Provider store={store}>
          <BrowserRouter>
              <ThemeProvider theme={theme}>
                  <UserEditModalContent />
              </ ThemeProvider>
          </BrowserRouter>
        </Provider>
      );
  });

    test("UserEditModal component renders", () => {
      console.log(sessionStorage.getItem('user'));
      console.log("here");
  
    expect(UserEditModal.getByText(/Change User Information/i));
  });

});