{!stus.length ? (

No Data

) : (

stus.map((stu: Student) => {

return (

);

})

)}

);

};

export default Pet;

Pet.test.tsx​​​​​​​

import { render } from '@testing-library/react';

import { StaticRouter } from 'react-router-dom/server';

import { expect, test } from 'vitest';

import Pet from './Pet.tsx';

test('displays a default thumbnail', async () => {

// 渲染组件

const pet = render();

// 异步等待获取指定的DOM元素

const petThumbnail = (await pet.findByTestId(

'thumbnail'

)) as HTMLImageElement;

// 断言0.jpg包含在src的属性值中

expect(petThumbnail.src).toContain('0.jpg');

// 卸载组件

pet.unmount();

});

有很多API可以断言一个元素是否存在，例如toBeInTheDocument，详细用法请查阅官方文档。

expect(testDom).toBeInTheDocument();

5.2交互测试

上面测试了组件能够按预期渲染，单一个这样的用例是远远不够的，我们还需要模拟用户交互行为，来测试组件是否符合预期，例如常见的点击、拖拽等。

Carousel.tsx​​​​​​​

import type { FC, MouseEvent } from 'react';

import { useState } from 'react';

interface PropsType {

images?: string[];

}

const Carousel: FC = (props) => {

const { images = ['http://pets-images.dev-apis.com/pets/0.jpg'] } = props;

const [active, setActive] = useState(0);

const handleIndexClick = (event: MouseEvent) => {

const { index = 0 } = (event.target as HTMLImageElement).dataset;

setActive(+index);

};

return (

);

};

export default Carousel;

Carousel.test.tsx​​​​​​​

import { act, fireEvent, render } from '@testing-library/react';

import { expect, test } from 'vitest';

import Carousel from './Carousel.tsx';

test('lets users click on thumbnails to make them the hero', async () => {

const images = ['0.jpg', '1.jpg', '2.jpg', '3.jpg'];

const carousel = render();

const hero = (await carousel.findByTestId('hero')) as HTMLImageElement;

expect(hero.src).toContain(images[0]);

for (let i = 0; i < images.length; i++) {

const image = images[i];

const thumb = await carousel.findByTestId(`thumbnail${i}`);

act(() => {

// 模拟 click 用户事件

fireEvent.click(thumb);

});

expect(hero.src).toContain(image);

expect(Array.from(thumb.classList)).toContain('active');

}

});

6.React Hook 测试

这里的Hook是指业务中自定义封装的Hook，我们知道Hook只能在函数组件中调用，那如何来做单元测试呢？RTL中提供了renderHook ，专门用来调用 Hook。

useSearch.ts​​​​​​​

import { useState, useMemo } from 'react';

/**

* useSearch 数据过滤

* @param items 初始数组

* @return

* searchTerm 搜索词

* setSearchTerm 更新搜索词方法

* filteredItems 过滤后的数据

*/

export const useSearch = (items: any[]) => {

const [searchTerm, setSearchTerm] = useState('');

const filteredItems = useMemo(() => {

return items.filter((movie) =>

movie.title.toLowerCase().includes(searchTerm.toLowerCase())

);

}, [items, searchTerm]);

return {

searchTerm,

setSearchTerm,

filteredItems,

};

};

useSearch.test.ts​​​​​​​

import { act, renderHook } from '@testing-library/react';

import { describe, expect, it } from 'vitest';

import { useSearch } from '@/hooks/__test__/useSearch.ts';

describe('useSearch hook', () => {

// 测试返回默认搜索项 和 原始项目列表

it('should return a default search term and original items', () => {

const items = [{ title: 'Star Wars' }];

// renderHook 模拟hook执行环境

const { result } = renderHook(() => useSearch(items));

// result.current 为useSearch hook的返回值

expect(result.current.searchTerm).toBe('');

expect(result.current.filteredItems).toEqual(items);

});

// 测试设置查询条件是否生效

it('should return a filtered list of items', () => {

const items = [{ title: 'Star Wars' }, { title: 'Starship Troopers' }];

const { result } = renderHook(() => useSearch(items));

// 反应，所有的渲染和触发的事件都包装在 act 中。它负责在调用之后刷新所有效果并重新渲染。

act(() => {

result.current.setSearchTerm('Wars');

});

expect(result.current.searchTerm).toBe('Wars');

expect(result.current.filteredItems.length).toBe(1);

expect(result.current.filteredItems).toEqual([{ title: 'Star Wars' }]);

});

});

7.异步、Mock测试​​​​​​​

7.1使用waitFor，异步等待接口返回

前端很多数据都是通过接口返回，页面需要等待接口返回后才能渲染，因此单元测试中的断言也需要等待，使用waitFor可以实现。

useMovies.ts​​​​​​​

export const useMovies = ():{ movies: Movie[], isLoading: boolean, error: any } => {

const [movies, setMovies] = useState([]);

const fetchMovies = async () => {

try {

setIsLoading(true);

const response = await fetch("https://swapi.dev/api/films");

if (!response.ok) {

throw new Error("Failed to fetch movies");

}

const data = await response.json();

setMovies(data.results);

} catch (err) {

//do something

} finally {

//do something

}

};

useEffect(() => {

fetchMovies();

}, []);

return { movies }

}

useMovies.test.ts​​​​​​​

import { renderHook, waitFor } from '@testing-library/react';

import { describe, expect, it } from 'vitest';

import { useMovies } from '@/hooks/__test__/useMovies.ts';

describe('useMovies hook', () => {

//...

it('should setTimeout movies', async () => {

const { result } = renderHook(() => useMovies());

// 在达到超时值之前，waitFor 可能会多次运行回调。请注意，调用的数量受到超时和间隔选项的限制

await waitFor(() => {

expect(result.current.isLoading).toBe(true);

expect(result.current.movies).toEqual([{ title: 'Star Wars' }]);

expect(result.current.error).toBe(null);

});

});

});

waitFor的第二个参数是一个配置对象，可以配置超时时间，超过配置的上限后，测试为不通过.​​​​​​​

// 默认间隔为50毫秒,超时时间是1000ms。第二个参数可以配置间隔和超时时间

await waitFor(

() => {

// ...

},

{

timeout: 1000,

}

);

7.2使用spyOn拦截请求方法，自定义mock

第一种方法是真实向后端发送了请求，在实际运用中可能不太合适。我们可以选择spyOn来拦截fetch，自己mock接口返回值，更加符合测试场景。​​​​​​​

import { renderHook, waitFor } from '@testing-library/react';

import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';

import { useMovies } from '@/hooks/__test__/useMovies.ts';

describe('useMovies hook', () => {

// 通过vi.spyOn方法，我们可以在不触发真正的 API 调用的情况下运行测试，从而减少由于外部因素导致测试失败的机会。

// 监视该global.fetch方法并模拟其实现以返回虚假响应

const fetchSpy = vi.spyOn(global, 'fetch');

// 注册一个回调函数，在开始运行当前上下文中的所有测试之前调用一次

beforeAll(() => {

const mockResolveValue = {

ok: true,

data: [{ title: 'Star Wars' }],

};

// 接受一个值，该值将在调用 mock 函数时返回

fetchSpy.mockReturnValue(mockResolveValue as any);

});

// 测试 fetch异步获取数据

it('should fetch movies', async () => {

const { result } = renderHook(() => useMovies());

await waitFor(() => {

expect(result.current.isLoading).toBe(true);

expect(result.current.movies).toEqual([{ title: 'Star Wars' }]);

expect(result.current.error).toBe(null);

});

});

// 注册一个回调函数，以便在当前上下文中所有测试运行完毕后调用一次。

afterAll(() => {

// 将内部实现还原为原始函数

// 还可以在 beforeEach 或 afterEach 中使用 mockClear()in方法来确保我们的测试完全隔离

fetchSpy.mockRestore();

});

});

通过调用vi.spyOn(global, 'fetch')，拿到代理方法，再调用mockReturnValue设置mock值，以此来模拟接口返回，这样更方便去断言。

由于我们模拟了fetch方法的返回值，因此需要在测试完成后使用mockRestore恢复其原始实现，还可以使用该mockClear()方法清除所有mock的信息

7.3测试生命周期

beforeAll：在当前文件的正式开始测试前执行一次，适合做一些每次 test 前都要做的初始化操作，比如数据库的清空以及初始化 beforeEach：在当前文件的每个 test 执行前都调用一次。 afterAll：在当前文件所有测试结束后执行一次，适合做一些收尾工作，比如将mock清除。 afterEach：在当前文件的每个 test 执行完后都调用一次。

结尾

这篇文章从单元测试的重要性、测试工具、测试实践三个方面，带大家入门前端单元测试。

相信大家认真学完后都能有收获！

行动吧，在路上总比一直观望的要好，未来的你肯定会感谢现在拼搏的自己！如果想学习提升找不到资料，没人答疑解惑时，请及时加入群： 786229024，里面有各种测试开发资料和技术可以一起交流哦。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】软件测试面试文档 我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

文章来源

 您阅读本篇文章共花了：