如何模拟实际上是 Redux 的连接动作创建者的道具？答案

【问题标题】：How to mock props that actually are connected action creators of Redux?如何模拟实际上是 Redux 的连接动作创建者的道具？
【发布时间】：2017-12-15 07:27:14
【问题描述】：

在集成测试中，我想测试连接的动作创建者是否被调用。

describe('SomeContainer', () => {
  let subject, store, fancyActionCreator

  beforeEach(() => {
    store = createStore(combineReducers({ /* ... */ }))
    fancyActionCreator = sinon.spy()
    const props = {
      fancyActionCreator
    }
    subject = (
      <Provider store={store}>
        <SomeContainer {...props} />
      </Provider>
    )
  })

  it('calls fancyActionCreator on mount', () => {
    mount(subject)
    expect(fancyActionCreator.callCount).to.equal(1)
  })
}

动作创建者在 componentWillMount 内部调用，并在测试环境之外按预期工作。

问题是原始动作创建者在测试中被调用并且没有被正确地模拟掉。

我感觉这是因为 Redux 的 connect() 方法正在取代间谍：

connect(mapStateToProps, { fancyActionCreator })(SomeContainer)

【问题讨论】：

标签： reactjs testing redux sinon enzyme

【解决方案1】：

您使用 store 安装了组件。如果您从 mount 调用中获取返回值，它会为您提供反应元素的酶包装。此包装器可用于对 store 调度操作：

const enzymeWrapper = mount(subject)
enzymeWrapper.node.store.dispatch({ type: "ACTION", data: "your fake data" });

但这是更多集成类型的测试，因为您正在使用减速器以及将 Redux 存储状态连接到您的属性。

这是我可以用来测试 Redux 存储状态与组件属性的连接的唯一测试。如果您以其他方式伪造属性，您可能会覆盖您的组件逻辑，但是您缺少将属性连接到存储的部分。

我建议将您的组件分成展示组件和容器组件。 Presentational 不需要使用 store，因此您可以通过传递不同的属性来锤击它的逻辑。容器组件关注的是将存储连接到展示组件。因此，对于容器组件，您将使用我描述的测试类型。

对评论的反应：

实际上，将mount 与shallow 用于演示/未连接组件并不是那么简单。有时你在你的展示组件上使用了需要通过 mount 渲染的子组件（例如，由于某种原因，react-select 需要 DOM）。

但通常是的，应该努力将shallow 用于表示组件，除非您意识到您需要mount :)。

【讨论】：