[React Testing] Test a Custom React Hook with renderHook from React Hooks Testing Library
React with from test library hook Testing Custom
2023-09-14 09:00:47 时间
That setup function is pretty handy. Seems like a good opportunity for an abstraction. Well, we already have one! It’s called React Hooks Testing Library. Let’s swap our setup function for the renderHook function from @testing-library/react-hooks.
Testing:
import {renderHook, act} from '@testing-library/react-hooks' import {useCounter} from '../use-counter' test('exposes the count and increment/decrement functions', () => { const {result} = renderHook(useCounter) expect(result.current.count).toBe(0) act(() => result.current.increment()) expect(result.current.count).toBe(1) act(() => result.current.decrement()) expect(result.current.count).toBe(0) }) test('allows customization of the initial count', () => { const {result} = renderHook(useCounter, {initialProps: {initialCount: 3}}) expect(result.current.count).toBe(3) }) test('allows customization of the step', () => { const {result} = renderHook(useCounter, {initialProps: {step: 2}}) expect(result.current.count).toBe(0) act(() => result.current.increment()) expect(result.current.count).toBe(2) act(() => result.current.decrement()) expect(result.current.count).toBe(0) })
相关文章
- React源码分析(二)渲染机制
- React核心原理与虚拟DOM
- 滴滴前端常考react面试题(附答案)
- 可能你的react函数组件从来没有优化过
- 前端一面经典react面试题(边面边更)
- Mac下搭建React开发环境
- 使用hel-micro制作远程antd、tdesign-react
- react源码分析:深度理解React.Context
- 一天梳理完react面试题
- 前端经典react面试题及答案_2023-02-28
- react源码分析--组件的创建和更新
- react源码分析--深度理解React.Context
- vite 创建React中遇到的坑
- react源码解析-开篇介绍和面试题
- React 项目部署后,页面404解决
- 有哪些值得学习的大型 React 开源项目?
- react源码分析:深度理解React.Context_2023-02-07
- ORA-39322: Cannot use transportable tablespace with TIMESTAMP WITH TIME ZONE columns and different time zone version. ORACLE 报错 故障修复 远程处理
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- Facebook 开源安卓版 React Native
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)