[React Testing] Mock HTTP Requests with jest.mock in React Component Tests
2023-09-14 08:59:14 时间
If you have a component that makes HTTP requests, you’ll probably want to mock those out for UI unit and integration tests. Let’s see how to use jest’s built-in mocking capabilities to do that.
Component:
import React from 'react' import { loadGreeting } from './api' function GreetingLoader() { const [greeting, setGreeting] = React.useState('') async function loadGreetingForInput(e) { e.preventDefault() const { data } = await loadGreeting(e.target.elements.name.value) setGreeting(data.greeting) } return ( <form onSubmit={loadGreetingForInput}> <label htmlFor="name">Name</label> <input id="name" /> <button type="submit">Load Greeting</button> <div aria-label="greeting">{greeting}</div> </form> ) } export { GreetingLoader }
API:
const sleep = (time) => new Promise((resolve) => { setTimeout(resolve, time) }) const greetings = ['Hello', 'Hi', 'Hey there', `What's up`, 'Howdy', `G'day`] async function loadGreeting(subject) { return { data: { greeting: `${await fetchRandomGreeting()} ${subject}` } } } async function fetchRandomGreeting() { await sleep(1000) return greetings[Math.floor(Math.random() * greetings.length)] }
Testing:
import React from 'react' import { render, fireEvent, waitFor } from '@testing-library/react' import { loadGreeting as mockLoadGreeting } from '../extra/api' import '@testing-library/jest-dom/extend-expect' import { GreetingLoader } from '../extra/greeting-loader-01-mocking' // mock all the export from api module jest.mock('../extra/api') test('loads greeting on click', async () => { const testGreeting = 'TEST_GREETING' // Mock the data return mockLoadGreeting.mockResolvedValueOnce({ data: { greeting: testGreeting } }) const { getByLabelText, getByText } = render(<GreetingLoader />) const nameInput = getByLabelText(/name/i) const loadButton = getByText(/load/i) nameInput.value = 'Mary' fireEvent.click(loadButton) expect(mockLoadGreeting).toHaveBeenCalledWith('Mary') expect(mockLoadGreeting).toHaveBeenCalledTimes(1) // using waitFor until to avoid warning from React await waitFor(() => expect(getByLabelText(/greeting/i)).toHaveTextContent(testGreeting), ) })
afterEach(() => {
jest.clearAllMocks()
})
相关文章
- 【React巩固计划】写给自己的useEffect
- 小前端读源码 - React(浅析Keys原理)
- React技巧之发出http请求
- Interview: 2020春季中高级前端面试记 | 渐进增强题目甄选(上篇)-react&http基础
- React源码学习入门(五)详解React中的Transaction事务机制
- 前端接入单元测试(Node+React)
- react源码分析:深度理解React.Context_2023-02-28
- React 基础
- React源码之深度理解diff算法
- 实现react源码的核心功能
- react:组件的生命周期、父子组件的生命周期
- React源码分析,深入理解fiber
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- react源码分析:深度理解React.Context
- react踩坑笔记
- react源码中的协调与调度_2023-02-06
- 面试官:react中的setState是同步的还是异步的_2023-02-19
- 细说React组件性能优化_2023-03-15
- 端口Linux查看HTTP端口:一步一步指南(linux查看http)
- 服务器一步步教你搭建Linux HTTP服务器(linux搭建http)
- 请求使用Linux发送HTTP请求的方法(linux发送http)
- 服务器Linux下简易配置HTTP服务器(linux配置http)
- Linux下HTTP抓包实战精要(http抓包linux)
- 深入浅出:Linux 架构学习 HTTP 协议(http协议linux)
- Linux下快速访问HTTP(linux 访问http)