@types/redux-mock-store

What is @types/redux-mock-store?

@types/redux-mock-store provides TypeScript definitions for the redux-mock-store package, which is used for testing Redux async action creators and middleware. It allows developers to create a mock store for testing purposes, ensuring that dispatched actions and resulting state changes can be easily verified.

What are @types/redux-mock-store's main functionalities?

Creating a Mock Store

This feature allows you to create a mock store with specified middlewares. In this example, redux-thunk is used as middleware.

const configureMockStore = require('redux-mock-store').default;
const thunk = require('redux-thunk').default;
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const store = mockStore({});

Dispatching Actions

This feature allows you to dispatch actions to the mock store and then retrieve the list of dispatched actions for verification.

store.dispatch({ type: 'ACTION_TYPE' });
const actions = store.getActions();
console.log(actions);

Testing Async Actions

This feature allows you to test async actions by dispatching them to the mock store and then verifying the resulting actions.

const myAsyncAction = () => {
  return (dispatch) => {
    return fetch('/endpoint')
      .then(response => response.json())
      .then(data => dispatch({ type: 'SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FAILURE', error }));
  };
};

store.dispatch(myAsyncAction()).then(() => {
  const actions = store.getActions();
  expect(actions[0]).toEqual({ type: 'SUCCESS', payload: { /* expected data */ } });
});

Other packages similar to @types/redux-mock-store

redux-saga-test-plan

redux-saga-test-plan is a library for testing Redux-Saga. It provides utilities to test the effects and sagas in isolation or as a whole. Unlike redux-mock-store, which focuses on testing action creators and middleware, redux-saga-test-plan is specifically designed for testing sagas.

redux-test-utils

redux-test-utils is a library that provides utilities for testing Redux applications. It includes helpers for creating mock stores, dispatching actions, and verifying state changes. It is similar to redux-mock-store but offers a broader range of utilities for testing Redux applications.

README

Installation

npm install --save @types/redux-mock-store

Summary

This package contains type definitions for redux-mock-store (https://github.com/dmitry-zaets/redux-mock-store).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/redux-mock-store.

index.d.ts

import * as Redux from "redux";

export interface MockStore<S = any, A extends Redux.Action = Redux.AnyAction> extends Redux.Store<S, A> {
    getActions(): any[];
    clearActions(): void;
}

export type MockStoreEnhanced<S = {}, DispatchExts = {}> = MockStore<S> & { dispatch: DispatchExts };

export type MockStoreCreator<S = {}, DispatchExts = {}> = (
    state?: S | MockGetState<S>,
) => MockStoreEnhanced<S, DispatchExts>;

export type MockGetState<S = {}> = (actions: Redux.AnyAction[]) => S;

/**
 * @deprecated
 *
 * The Redux team does not recommend using this package for testing. Instead, check out our {@link https://redux.js.org/recipes/writing-tests testing docs} to learn more about testing Redux code.
 *
 * Testing with a mock store leads to potentially confusing behaviour, such as state not updating when actions are dispatched. Additionally, it's a lot less useful to assert on the actions dispatched rather than the observable state changes.
 *
 * You can test the entire combination of action creators, reducers, and selectors in a single test, for example:
 * ```js
 * it("should add a todo", () => {
 *   const store = makeStore(); // a user defined reusable store factory
 *
 *   store.dispatch(addTodo("Use Redux"));
 *
 *   expect(selectTodos(store.getState())).toEqual([{ text: "Use Redux", completed: false }]);
 * });
 * ```
 *
 * This avoids common pitfalls of testing each of these in isolation, such as mocked state shape becoming out of sync with the actual application.
 *
 * If you want to use `configureStore` without this visual deprecation warning, use the `legacy_configureStore` export instead.
 *
 * `import { legacy_configureStore as configureStore } from 'redux-mock-store';`
 */
export function configureStore<S, DispatchExts = {}>(
    middlewares?: Redux.Middleware[],
): MockStoreCreator<S, DispatchExts>;

/**
 * Create Mock Store returns a function that will create a mock store from a state
 * with the same set of set of middleware applied.
 *
 * @param middlewares The list of middleware to be applied.
 * @template S The type of state to be held by the store.
 * @template DispatchExts The additional Dispatch signatures for the middlewares applied.
 */
export const legacy_configureStore: typeof configureStore;

export default configureStore;

Additional Details

• Last updated: Mon, 18 Nov 2024 12:03:08 GMT
• Dependencies: redux

Credits

These definitions were written by Marian Palkus, and Cap3.