Question

我对智能/哑组件等非常熟悉。现在我正在做类似

的事情

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

然后我有一个具有UI和东西的LoginComponent。

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

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

Answer 1

我认为你是对的。当用户单击登录按钮时，LoginContainer组件需要提供您要执行的功能。看我的例子：

<强> 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文档中了解这一点。

所以现在我的Login组件可以利用传入的函数来调度一个动作：

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

此Button将位于我的组件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)
      })
    })
  })
})

基本上你创建了一个间谍，通过它的道具将其传递给组件，然后模拟一个点击事件。然后，您可以检查您的测试是否已实际调用该方法。

redux哑组件功能单元测试

1 个答案: