javascript - 将jest.fn()函数传递给 enzyme 浅渲染中的mapDispatchToProps

具有非常简单的组件:

从'prop-types'导入PropTypes
从'react'导入React
从'react-redux'导入{connect}

class MyComponent extends React.Component {
  componentWillMount() {
    if (this.props.shouldDoSth) {
      this.props.doSth()
    }
  }

  render () {
    return null
  }
}

MyComponent.propTypes = {
  doSth: PropTypes.func.isRequired,
  shouldDoSth: PropTypes.bool.isRequired
}

const mapStateToProps = (state) => {
  return {
    shouldDoSth: state.shouldDoSth,
  }
}

const mapDispatchToProps = (dispatch) => ({
  doSth: () => console.log('you should not see me')
})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

我想测试doSth等于shouldDoSth时是否调用了true。

我写了一个测试:

describe('call doSth when shouldDoSth', () => {
  it('calls doSth', () => {
    const doSthMock = jest.fn()
    const store = mockStore({shouldDoSth: true})
    shallow(<MyComponent doSth={doSthMock}/>, { context: { store } }).dive()
    expect(doSthMock).toHaveBeenCalled()
  })
})

但似乎尽管我将doSth作为props传递，但在执行mapDispatchToProps时，它却被console.log('im not a mock')覆盖。

如何正确传递/覆盖/分配doSth函数以使组件使用模拟而不是mapDispatchToProps中的函数。或者，也许我正在做一些根本不应该允许的事情，并且有“适当”的方式来测试我的案子。我应该只是模拟调度并检查它是否使用适当的参数调用吗？

最佳答案

我认为您需要弄清楚的一件事是，是要doSth成为 Prop ，还是要在mapDispatchToProps中连接的redux Action 。

如果是 Prop ，则​​可以将其连接到父级(容器)中的redux。从此组件的mapDispatchToProps中删除它。这将使组件更具可测试性。

如果您希望它是连接到此组件中的一个redux Action ，则将 Action 从该组件中移出，例如actions.js，将其导入该组件中，然后在测试jest.mock('actions.js', () => ({doSth: jest.mock()}))中对其进行模拟是很有意义的。