Question

我一直在尝试测试redux的ConnectedComponent。但是我不能相处。当我将商店作为商店道具传递给ConnectedComponent时，出现此错误：

不变违反：在道具中传递redux存储已被删除，并且不执行任何操作。要将自定义Redux存储用于特定组件，使用React.createContext（）创建一个自定义的React上下文，并将上下文对象传递给React-Redux的Provider和特定组件，例如：。您还可以通过{context：MyContext}选项进行连接

我的测试：

const store = storeFactory({ success: true });
test('renders component without error', () => {
  const wrapper = shallow(<Input store={store} />);

  expect(wrapper.props()).toBe({});
});

我使用创建商店的辅助功能：

export const storeFactory = initialState => {
  return createStore(rootReducer, initialState);
};

我使用以下版本的软件包：

"react-redux": "^6.0.0",
"redux": "^4.0.1",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-redux": "^0.2.1",
"jest": "^23.6.0",
"jest-enzyme": "^7.0.1"

我不知道如何测试ConnectedComponent。请，如果您对此情况有任何解决方案或建议，请与我分享））

Answer 1

是的，由于内部架构的变化，在React-Redux v6 we removed the ability to pass store as a prop to connected components中。

老实说，对我来说，浅浅渲染连接的组件似乎毫无意义，因为您真正测试的只是connect调用您的mapState和mapDispatch并通过将合并的结果添加到您自己的组件中。我们已经有针对React-Redux的测试来验证该行为：）

但是，似乎确实有人想要这样做。我们有an open issue to discuss how we can help handle the "shallow+connected" use case。没有针对API的特定更改的预计到达时间，但请注意该问题。

Answer 2

使用redux-mock-store进行测试

您将创建类似这样的东西，而不是storeFactory

const initialState = {}
const mockStore = configureStore();
let store;
beforeEach(() => {
  store = mockStore(initialState)
  wrapper = shallow(<Input store={store} />)
})

我希望这将有助于解决问题

测试Redux的ConnectedComponent

2 个答案: