如何在测试之间重置 Redux？

Question

有没有人能够在测试之间清除 Redux？你做了什么？

我有一个使用 Redux 的 React Native Expo 应用程序。

我有一个单独运行的测试，但是当我运行所有测试时，它失败了，因为其他测试在 redux 中留下了状态更改。

如何在测试之间“刷新”redux 存储。

我尝试了 mock-redux-store 包，但是当我将 combineReducers() 传递给它时，它什么也没返回。

我可以在那里手动重建状态切片，并将它们传递给模拟存储，但这很难维护。

testing-library-utils.js：

//This file adds a Redux Provider to a component's context when running Jest tests from test files.
//This first import enables jest native, which enables some state-centric matchers
import '@testing-library/jest-native/extend-expect';
import React from 'react';
import { render } from '@testing-library/react-native';
import { Provider, combineReducers, applyMiddleware, compose } from 'redux';
import ReduxThunk from 'redux-thunk';
import { createMockStore } from 'redux-test-utils';
// import { store } from '../App';

import logBooksReducer from '../store/reducers/logBooks-reducer';
import authReducer from '../store/reducers/auth-reducer';

const composedMiddleWare = compose(applyMiddleware(ReduxThunk));

const rootReducer = combineReducers({
  logBooks: logBooksReducer,
  auth: authReducer,
});

const store = createMockStore(rootReducer, composedMiddleWare);

console.log('STORE ', JSON.stringify(store.getState()));

const AllTheProviders = ({ children }) => {
  console.log('Store.getState() from UTILS ', store.getState());
  return <Provider store={store}>{children}</Provider>;
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

// re-export everything
export * from '@testing-library/react-native';

// override render method
export { customRender as render };

Answer 1

Redux 是一个定义应用程序当前状态的对象。因此，除非您知道笑话的正确顺序，否则它不会起作用。顺便说一句，Jest 并不是每次都以相同的顺序运行测试。有时它会存储失败的那些并在下一次运行它们。

建议您为每个测试/测试文件升级 Redux 存储。

这是我的test/utils/mocks/redux/index.js

import configureStore from 'redux-mock-store';
import createMockBluetooth from '../bt';
import createMockApi from '../api';
import createMockState from './state';
...


const createMockStore = ({
    state = createMockState(),
    api = createMockApi(),
    ble = createMockBluetooth(),
...,
    middlewares = [],
} = {}) => {
    const thunkMiddleware = ({ dispatch, getState }) => (next) => (action) => (
        typeof action !== 'function' ?
            next(action) :
            action(dispatch, getState, { api, bt, ... })
    );

    return configureStore([thunkMiddleware, ...middlewares])(state);
};

export default createMockStore;

这样我就可以为每个测试定义不同的商店：

addressList.test.js

const defaultProps = {
    navigation: {
        state: { params: {} },
        dispatch: jest.fn(),
 ...
        pop: jest.fn(),
        popToTop: jest.fn(),
        isFocused: jest.fn(),
    },
};

const getStoreWithMockAddresses = (mockData) =>
    createMockStore({
        state: createMockState({
            listOfAddresses: mockData,
        },
        {
            customMerge: preferOverride('listOfAddresses'),
        }),
    });


....

test('random test', () => {
    const mockAddresses = {
        fullList: [
            { name: 'address-1', number: 69 },
        ],
    };

   const mockStore = getStoreWithMockAddresses(mockAddresses);

    const { getByTestId } = render(<YourComponent navigation={ defaultProps.navigation } />, { wrapper: { store: mockStore } });

}

我确实需要为每个测试进行设置。这是有道理的，因为我正在测试组件将在特定状态下工作。

请注意，render 方法语法有点像，因为我使用的是原始渲染的自定义实现。

编辑：

import merge from 'deepmerge';

const createMockState = (overrides = {}, options = []) => merge({
...
    listOfAddresses: {
        fullList: [] },

}, overrides, options);

export default createMockState;

Answer 2

终于明白了！

这是我对Redux Testing Docs中内容的修改版

//This file adds a Redux Provider to a component's context when running Jest tests from test files.
//This first import enables jest native, which enables some state-centric matchers
import '@testing-library/jest-native/extend-expect';
import React from 'react';
import { render as rtlRender } from '@testing-library/react-native'; // This line is important

import { Provider } from 'react-redux';
import { rootReducer } from '../App'; //Importing my same Root Reducer, so maintaining is easier
import { NavigationContainer } from '@react-navigation/native';
import { configureStore } from '@reduxjs/toolkit'; //Need to install @reduxjs/toolkit

const render = (
  ui,
  {
    preloadedState,
    store = configureStore({
      reducer: rootReducer,
      preloadedState,
      middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
          serializableCheck: false,
        }),
    }),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => {
    return (
      <Provider store={store}>
        <NavigationContainer>{children}</NavigationContainer> //Adding nav container here
      </Provider>
    );
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

// re-export everything
export * from '@testing-library/react-native';

// override render method
export { render };

然后，在每个测试的基础上，您将预加载状态传递给测试的渲染函数。这样每个测试都可以有一个单独的 redux 测试环境。

  it('Displays the locaiton', async () => {
    const preloadedState = { entries: { allEntries: myPreloadedStateForThisTest } }; // Make sure to match the data structure of your real state. 

    const { findByText } = render(<EntriesScreen />, { preloadedState });

    // Expect:
    await findByText(/West Virginia/i);
  });

感谢@markerikson 提供examlple code