Функция тестирования компонентов в React с Enzyme и Jest

Question

Я тестирую компонент по шаблону «Контейнер / Презентация». Что мне нужно для того, чтобы мое покрытие было 100%, это проверить функцию handleChange (), в которой у меня есть setState (). Дело в том, что я просто тестирую компонент 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 - это компонент Container, а DataStructureFormView - это презентационный.

Тестовый файл:

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

Это один из многочисленных подходов, которые я использовал, но он не проверяет setState () внутри метода handleChange ().

Что еще я могу сделать?

Answer 1

Самое простое решение - проверить, изменилось ли состояние соответствующим образом:

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