How can I test Redux-connected components using React Testing Library?

How can I test Redux-connected components using React Testing Library?

You can test Redux-connected components by using the render method from React Testing Library along with a custom store provider.

Can you show me a code example for that?

Sure! Here's a simple example:

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

const store = createStore(reducer);

const renderWithRedux = (component, { initialState, store = createStore(reducer, initialState) } = {}) => {
  return render(<Provider store={store}>{component}</Provider>);
};

// Now you can use renderWithRedux to test your component.

What if I want to test actions and reducers?

You can test actions by dispatching them and checking the state changes. For reducers, you can call them directly with different actions and assert the expected state.

Are there any best practices for testing with React Testing Library?

Yes! Focus on testing user interactions, avoid testing implementation details, and use getBy queries to select elements.