使用 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>
)
;
现在我正在尝试测试showModal
、closeModal
和handleSubmit
方法,但我的测试失败了。让我知道在功能组件中测试 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.
让我知道如何在功能组件中测试showModal
、closeModal
和handleSubmit
方法。
【问题讨论】:
你不应该只是在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