React Testing Library

 @testing-library/react, jest

{ render } from the react-testing-lib allow us to mount/render a component in virtual memory

{ screen } from the lib allow us to read the rendered HTML

screen has few methods to query elements from the rendered HTML, can be used to confirm the expected elements are rendered -

const myElement = screen.getByText("some Text");
expect(myElement).toBeInTheDocument()

getByText, getByTestId (uses data-testid attribute), getByAltText etc. methods can be used

To Test a component linked to redux, render it wrapping inside <Provider> with its's store attribute set to mock store data

import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

// .... inside some test
const store = createStore(appReducer, initialState);
const { rerender, ...rest } = render(
    <Provider store={store}>
      <Component {...props} />
    </Provider>,
  );
  
// use rerender, to rerender with some new store values

Last updated