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

有非常简单的组件：

从’prop-types’导入PropTypes
从’反应’导入反应
从’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)

我想测试当shouldDoSth等于true时是否调用doSth.

我写了一个测试：

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作为道具传递,但它被mapDispatchToProps覆盖,因为console.log(‘我不是模拟’)被执行.

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

解决方法:

我认为你需要弄清楚的一件事是你是想让doSth成为道具,还是想在mapDispatchToProps中连接一个redux动作.

如果它是一个道具,那么你将它连接到父(容器)中的redux.将其从此组件的mapDispatchToProps中删除.这将使组件更易于测试.

如果你想让它成为在这个组件中连接的redux动作,那么将动作移出这个组件是有意义的,比如actions.js,将它导入到这个组件中,然后在测试jest.mock中模拟它. (‘actions.js’,()=>({doSth：jest.mock()}))

标签：enzyme,javascript,redux,jestjs,redux-mock-store
来源： https://codeday.me/bug/20190910/1801112.html