在反应测试中访问redux store答案

【问题标题】：Access redux store in react test在反应测试中访问redux store
【发布时间】：2022-01-05 21:27:05
【问题描述】：

我有以下测试

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import  {store}  from '../../app/store';
import Game from './Game';

test('should render Game component correctly', () => {
  const { getByText } = render(
    <Provider store={store}>
      <Game/>
    </Provider>
  );   

});

我想根据 redux 存储中的状态对 Game 组件做出一些断言，但是如何从我的测试中访问状态？

【问题讨论】：

如果你在你的组件中调度一些动作，在改变状态后，你可以使用store.getState()获得整个状态。需要更多详细信息来说明您要测试什么

标签： reactjs redux react-testing-library

【解决方案1】：

尝试将您的测试包装在 describe 函数中，如下所示：

let store;
describe("Your test", () => {
  test('should render Game component correctly', async () => {
    const { getByText } = render(
      <Provider store={store}>
        <Game />
      </Provider>
    );
    await findByText('This text is now visible because your state was updated by the reducer');
  });
});

在里面，在你的测试上方添加一个beforeEach 语句：

beforeEach(() => {
    store = createTestStore();
});

实现您的createTestStore 函数：

export function createTestStore() {
  const store = createStore(
    combineReducers({
      // The reducers you use
      example: exampleReducer,
    })
  );
  return store;
}

我根据 Phil Lucks 在 Medium 上的一篇文章写了这个答案。如果您想自己检查，这里是link！

【讨论】：

但是如何在测试中访问我的商店的状态？
我对Redux不太熟悉，但是状态不是在store里面保存的吗？根据文档，createStore 生成具有初始状态的存储，reducers 对其进行变异，您可以使用store.getState() 检索它