Question

我正在按照Container / Presentational模式测试组件。为了使覆盖率达到100％，我需要测试具有setState（）的handleChange（）函数。事实是，我只是在测试Container组件，并且该函数在Presentational中被调用。

容器组件：

import React, { Component } from 'react'
import DataStructureFormView from './DataStructureFormView'

export default class DataStructureForm extends Component {
    state = {}

    handleChange = name => event => {
        this.setState({
            [name]: event.target.value
        })
    }

    render() {
        return (
            <DataStructureFormView
               handleChange={this.handleChange}
               form={this.state}
            />
        )
    }
}

如您所见，DataStructureForm是容器组件，而DataStructureFormView是Presentational组件。

测试文件：

import React from 'react'
import { shallow, mount } from 'enzyme'

describe('DataStructureForm', () => {
    it('should call the handleChange() function and change the state', () => {
        const component = mount(<DataStructureForm />)

        const handleChange = jest.spyOn(component.instance(), 'handleChange')

        component.instance().handleChange()

        expect(handleChange).toBeCalled()
     }
}

这是我已完成的多种方法之一，但它并未测试handleChange（）方法内部的setState（）。

我还能做什么？

Answer 1

最直接的解决方案是检查状态是否相应更改：

const component = shallow(<DataStructureForm />)
const value = 'someValue';
component.instance().handleChange('someName')({target: { value }});
expect(component.state('someName')).toEqual(value)

在React with Enzyme和Jest中测试组件功能

1 个答案: