使用 Jest / Enzyme 在 React 中的功能组件内部测试方法

Posted

技术标签:

【中文标题】使用 Jest / Enzyme 在 React 中的功能组件内部测试方法【英文标题】:Testing method inside functional component in React using Jest / Enzyme 【发布时间】:2020-07-17 21:30:17 【问题描述】:

以下是我尝试使用 jest / enzyme 测试的 React 功能组件。

React 功能组件代码 -

export const UserForm = props => 
    const labels, formFields, errorMessages = props;
    const [showModal, setShowModal] = React.useState(false);
    const [newId, setNewId] = React.useState('');

    const showModal = () => 
        setShowModal(true);
    

    const closeModal = () => 
        setShowModal(false);
    ;

    const handleSubmit = data => 
        Post(url, data)
            .then(resp => 
                const userData = resp.data;
                setNewId(() => userData.id);
                showModal();
            )
    

    return (
        <div className="user-form">
            <UserForm
                fields=formFields
                handleSubmit=handleSubmit
                labels=labels
                errors=errorMessages
            />
            showModal && <Modal closeModal=closeModal>
                <div className="">
                    <h3>Your new id is - newId</h3>
                    <Button
                        type="button"
                        buttonLabel="Close"
                        handleClick=closeModal
                        classes="btn btn-close"
                    />
                </div>
            </Modal>
        </div>
    )
;

现在我正在尝试测试showModalcloseModalhandleSubmit 方法,但我的测试失败了。让我知道在功能组件中测试 React Hooks 和方法的正确方法。

我的测试用例 -

import React from 'react';
import  UserForm  from '../index';
import  shallow  from 'enzyme';

describe('<UserForm />', () => 
    let wrapper;
    const labels = 
        success: 'Success Message'
    ;
    const formFields = [];
    const errorMessages = 
        labels: 
            firstName: 'First Name Missing'
        
    ;

    function renderShallow() 
        wrapper = shallow(<UserForm
            labels=labels
            formFields=formFields
            errorMessages=errorMessages
        />);
    
    it('should render with props(snapshot)', () => 
        renderShallow();
        expect(wrapper).toMatchSnapshot();
    );

    it('should test showModal method', () => 
        const mockSetShowModal = jest.fn();
        React.useState = jest.fn(() => [false, mockSetShowModal]);

        renderShallow();
        expect(mockSetShowModal).toHaveBeenCalledWith(true);
    );
);

我得到的错误 -

Expected mock function to have been called with:
      [true]
    But it was not called.

让我知道如何在功能组件中测试showModalcloseModalhandleSubmit 方法。

【问题讨论】:

你不应该只是在expect(mockSetShowModal)...行之前添加模拟函数mockSetShowModal(true)的调用吗? 【参考方案1】:

通常,React 中的函数式组件不应该以这种方式进行测试。 React 团队建议您使用更专注于实际用户界面场景的 React 测试库的方法。您不是在测试 React 组件实例,而是在测试 DOM 节点。

这是人们远离 Enzyme 并开始使用 RTL 的主要原因,因为您希望尽可能避免测试实现细节。

如果确实需要对某个方法进行测试,可以将其导出并与组件隔离测试。

【讨论】:

以上是关于使用 Jest / Enzyme 在 React 中的功能组件内部测试方法的主要内容,如果未能解决你的问题,请参考以下文章

在使用 Jest/Enzyme 进行测试期间检测 React 中的合成点击

使用 Jest/Enzyme 在 React 功能组件中测试封闭组件

如何使用 JEST、Enzyme 在 React 中测试自定义钩子?

如何使用 Jest 和/或 Enzyme 获取嵌套在 React 组件中的元素的属性?

如何使用 Jest/Enzyme 在 React 中测试文件类型输入的更改处理程序?

React Redux:使用 Enzyme/Jest 测试 mapStateToProps 和 mapDispatchToProps