Testing react components with redux-toolkit inside

Question

I have a component like this:

export const DetailsItem: FC = (): ReactElement => {
  const { isInEditMode } = useAppSelector(({ editMode }) => editMode);
  if (isInEditMode) {
    return <DetailsItemEdit />;
  }
  return <DetailsItemDisplay />;
};

and am trying to test it.

describe('DetailsItem', () => {
  it('should render DetailsItemDisplay component', () => {
    render(
      <Provider store={}> // I want to pass isInEditMode here.
        <DetailsItem />
      </Provider>,
    );

    screen.debug();
  });
});

The problem is, I somehow need to mock the store, to match my case. Any ideas how I should handle this?

I remember in my previous project I used a npm package to do this, but can't find it now, and can't remember how I did it, or what it was called

oieduardorabelo · Accepted Answer · 2021-09-06 21:47:31Z

1

you can create a helper function for your tests to abstract the setup of the store/dependencies:

// import dependencies here:

function createTestWithStore(stateFromTest, component) {
  let reducer = { reducerA, reducerB };
  let preloadedState = merge(initialState, stateFromTest);
  let store = configureStore({
    reducer,
    preloadedState
  })
  return <Provider store={store}>{component}</Provider>
}

and use it in your tests:

describe('DetailsItem', () => {
  it('should render DetailsItemDisplay component with a single item', () => {
    let testState = { list: [{ id: 1, name: "John" }] };
    render(createTestWithStore(testState, <DetailsItem />));
    screen.debug();
  });

  it('should render DetailsItemDisplay component no item', () => {
    let testState = { list: [] };
    render(createTestWithStore(testState, <DetailsItem />));
    screen.debug();
  });
});

have a look in the "Writing Tests" page from Redux, it is part of the "Recommended practices for testing apps using Redux": https://redux.js.org/usage/writing-tests#connected-components

edited Sep 6, 2021 at 21:47

answered Sep 6, 2021 at 11:40

oieduardorabelo

2,98520 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Ironside Over a year ago

What's the merge function here?

Alex Ironside Over a year ago

Also what should the initialState be? A state for one, or all reducers?

oieduardorabelo Over a year ago

that's up to you to decide based on your application state... my personal approach is to setup all reducers on tests... the "merge" function there is to illustrate merging a default state with state from tests, you can use any solution that you want... the main ideia and benefit of creating test functions like that is maintainability in long term

Alex Ironside Over a year ago

Ok, that makes sense. Thanks!

Collectives™ on Stack Overflow

Testing react components with redux-toolkit inside

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related