redux dumb组件功能单元测试

Question

I'm quite familiar with smart/dumb components etc. Now I'm doing something like

LoginContainer which connect with redux using react-redux via mapStateToProps and mapDispatchToProps.

Then I have a LoginComponent which has the UI and stuff.

So the question is, when a user click the login button in "LoginComponent", it has to call a function there. So I'm guess the way to do is to pass the function from LoginContainer, and then call it when the button is clicked in LoginComponent?

But in this way, does that mean when doing unit-test, I have to mock the functionality of this button function call in the dumb component LoginComponent?

Answer 1

I think you are absolutely right. The LoginContainer component needs to provide the function, that you want to be executed, when the user clicks the login button. See my example:

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

Note: I'm providing an object as the second parameter to connect() instead of a function. You can read about this in the redux docs.

So now my Login component can make use of that passed in function to dispatch an action:

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

This Button would live somewhere in my components render() method.

If you want to test such a presentational component, I would recommend to take a look at Enzyme . Enzyme is a JavaScript Testing utility for React which allows you to write tests like this:

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)
      })
    })
  })
})

Basically you create a spy, pass that to the component via its props and then simulate a click event. Then you can check in your test that the method has actually been called.