CODEWITHSUNDEEP
reactjstestingredux
Andrew Bliss
Andrew Bliss

Reputation: 91

React Redux Testing

I am trying to wrap my head around testing react components that use a redux store.

I have seen an examples use a Mock Store from redux-mock-store.

Link:

React/Redux Testing w/ Enzyme

I would think that I want to test with my real store. Is there a reason why this is the case? Is it only testing the functionality of the component that doesn't need to know about the real store? But then why use any store at all?

Upvotes: 0

Views: 285

Answers (3)

Aleksandr Gorin
Aleksandr Gorin

Reputation: 27

You also could test your redux (store / selectors) using the tool Check-State-Management.

It requires a bit of configuration. According to the documentation you:

Installation

  • Install chrome extension from Google Web Store
  • Prepare checkState.config.js file in /src folder of your project (you need to export all your selectors from this file). Look the example
  • Insert our middleware to your store:
import * as selectors from "./checkState.config.js";

const checkStateMiddleware = (options = {}) => {
    return window && window["__checkStoreExtension__"] ? window["__checkStoreExtension__"](options) :
        store => next => action => next(action);
};

const store = createStore(
    reducers,
    compose(applyMiddleware(
        checkStateMiddleware(selectors),
    )),
);

Once these tasks are done you can run your application, visit it with the Chrome extension turned on. It will then prepare test-cases based on the real state of your application as you navigate and interact with it.

Upvotes: 0

Arnaud Christ
Arnaud Christ

Reputation: 3551

Mocking the store with tools coming from redux-mock-store is useful for testing async actions.

Writing tests for async actions

Upvotes: 1

Shobhit Chittora
Shobhit Chittora

Reputation: 1279

Ideally your Components should be testable even without a store being present. You can just proxy the props passed and test the expected functionality. In most cases you just want to test the end contract of the component and not the actual implementation details ( actions, reducers, etc.).

This is very a very opinionated and pragmatic view point, but you can get away with having the following type of tests for your project -

  1. Unit Testing the Components
  2. E2E Testing the Pages
  3. View Regression Testing for your component library / design system.

Hope this helps! 😇

Upvotes: 2

Related Questions