javascript - redux dumb组件功能单元测试

Question

我对智能/dumb组件等非常熟悉。现在我正在做类似的事情

LoginContainer，通过mapStateToProps和mapDispatchToProps使用react-redux与redux连接。

然后我有一个包含 UI 和其他内容的 LoginComponent。

所以问题是，当用户单击“LoginComponent”中的登录按钮时，它必须调用那里的函数。所以我猜的方法是从 LoginContainer 传递函数，然后在 LoginComponent 中单击按钮时调用它？

但是这样，这是否意味着在进行单元测试时，我必须在dumb组件 LoginComponent 中模拟此按钮函数调用的功能？

Answer 1

我认为你是完全正确的。 LoginContainer 组件需要提供您希望在用户单击登录按钮时执行的函数。看我的例子:

登录容器

import { connect } from 'react-redux'

import Login from '../components/login'
import { initiateLoginRequest } from '../actions/login'

const LoginContainer = connect(null, { initiateLoginRequest })(Login)

export default LoginContainer

注意:我提供一个对象作为 connect() 的第二个参数，而不是函数。您可以在 redux 文档中阅读相关内容。

现在我的登录组件可以利用传入的函数来调度操作:

<Button
    raised
    primary
    label="Login"
    onClick={this.props.initiateLoginRequest()}
/>

此按钮将位于我的组件 render() 方法中的某个位置。

如果您想测试这样的演示组件，我建议您查看 Enzyme 。 Enzyme 是 React 的 JavaScript 测试实用程序，它允许您编写如下测试:

import expect from 'expect'
import React from 'react'
import { shallow } from 'enzyme'
import { Button } from 'react-toolbox/lib/button'

import Login from '../../src/components/login'

function setup() {
  const props = {
    initiateLoginRequest: expect.createSpy()
  }

  const wrapper = shallow(<Login {...props} />)

  return {
    props,
    wrapper
  }
}

describe('components', () => {
  describe('Login', () => {
    describe('Login Button', () => {
      it('should dispatch the proper action ', () => {
        const { wrapper, props } = setup()
        expect(props.initiateLoginRequest.calls.length).toBe(0)
        wrapper.find(Button).at(1).simulate('click')
        expect(props.initiateLoginRequest.calls.length).toBe(1)
      })
    })
  })
})

基本上，您创建一个 spy ，通过其 Prop 将其传递给组件，然后模拟单击事件。然后您可以在测试中检查该方法是否确实被调用。