qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 数据库 › 分布式数据库 › Jest进阶知识：测试快照 - 确保组件渲染输出精确 ...

Jest进阶知识：测试快照 - 确保组件渲染输出精确

[复制链接]
发表于 2025-12-30 15:41:17 | 显示全部楼层 |阅读模式
在 React 应用开辟中，确保组件的渲染输出精确是一项紧张的测试任务。快照测试是一种有用的方法，可以资助开辟者捕获并验证组件的渲染输出，确保其在差别的环境下保持划一。
什么是快照测试？

快照测试的根本头脑是：

  • 初次运行测试：将组件的渲染输出记载到一个快照文件中。
  • 后续运行测试：将组件的渲染输出与快照文件举行对比，确保两者划一。
快照测试可以有用地捕获不测的更改，确保组件的渲染输出不会由于代码的改动而发生不须要的变革。
快速上手

假设我们有一个简单的组件 App，它表现一个待服务项列表，并允许用户添加新的事项：
  1. import { useState } from "react";
  3. function App() {
  4.   const [items, setItems] = useState(["苹果", "香蕉", "西瓜"]);
  5.   const [value, setValue] = useState("");
  6.   const lis = items.map((it, idx) => <li key={idx}>{it}</li>);
  8.   function addItem() {
  9.     if (items) {
  10.       const newItems = [...items];
  11.       newItems.push(value);
  12.       setItems(newItems);
  13.       setValue("");
  14.     }
  15.   }
  16.   return (
  17.     <div className="App">
  18.       <input
  19.         type="text"
  20.         value={value}
  21.         onChange={(e) => setValue(e.target.value)}
  22.       />
  23.       <button onClick={addItem}>添加</button>
  24.       <ul>{lis}</ul>
  25.     </div>
  26.   );
  27. }
  29. export default App;
复制代码
接下来，我们编写测试代码来天生快照：
  1. import { render } from '@testing-library/react';
  2. import App from './App';
  4. test('renders learn react link', () => {
  5.   const { baseElement } = render(<App />);
  6.   expect(baseElement).toMatchSnapshot();
  7. });
复制代码
起首从 render 方法中解构出 baseElement（注意 render 方法泉源于 testing library）
接下来调用了 toMatchSnapshot（这个方法是 jest 提供的方法）来天生快照。
通过实行效果也可以看到，天生了一张快照，而且在我们的项目目次中（和你的测试文件是同级的），天生了一个名为 _snapshots_ 的目次，内里就是一张测试快照，测试快照的本质就是渲染出来的 DOM 的布局的字符串序列。
  1. // Jest Snapshot v1, https://goo.gl/fbAQLP
  3. exports[`renders learn react link 1`] = `
  4. <body>
  5.   <div>
  6.     <div
  7.       class="App"
  8.     >
  9.       <input
  10.         type="text"
  11.         value=""
  12.       />
  13.       <button>
  14.         添加
  15.       </button>
  16.       <ul>
  17.         <li>
  18.           苹果
  19.         </li>
  20.         <li>
  21.           香蕉
  22.         </li>
  23.         <li>
  24.           西瓜
  25.         </li>
  26.       </ul>
  27.     </div>
  28.   </div>
  29. </body>
  30. `;
复制代码
之后在下一次测试的时间，针对这个组件测试，就会将组件渲染出来的 DOM 布局的序列和之前的快照举行一个比对，看是否划一，如果和之前的快照是划一的，那么测试就通过，如果差别等（这一次渲染新增了DOM节点大概少了DOM 节点），那么就阐明这一次渲染和之前的渲染差别等的，测试不通过。
如下图所示：
快照测试的注意事项


  • 快照自己并不验证渲染逻辑是否精确：快照测试的紧张目的是防止不测的更改。如果测试失败，必要查抄是否有不盼望的更改。
  • 更新快照：如果确定渲染逻辑没有标题，但布局确实必要更改，可以使用 jest --updateSnapshot 下令更新快照。
克制大快照

在复杂的组件中，直接对整个组件举行快照会导致快照文件非常大。为了天生更小的快照，可以只针对特定的部门举行快照：
  1. import { render, screen } from '@testing-library/react';
  2. import App from './App';
  4. test('renders learn react link', () => {
  5.   render(<App />);
  6.   const content = screen.getByTestId('list');
  7.   expect(content).toMatchSnapshot();
  8. });
复制代码
在这个例子中，我们只针对 TestUI 组件天生快照。
扩展场景


  • 快照测试不但实用于组件的 UI 测试，还可以用于其他场景。比方，对于 HTTP 哀求的返回效果举行快照测试：
  1. // getUserById.ts
  2. const getUserById = async (id: string) => {
  3.   return request.get('user', {
  4.     params: { id }
  5.   });
  6. };
  8. // getUserById.test.ts
  9. describe('getUserById', () => {
  10.   it('可以获取 userId == 1 的用户', async () => {
  11.     const result = await getUserById('1');
  12.     expect(result).toMatchSnapshot();
  13.   });
  14. });
复制代码

  • 许多人喜欢把快照测试等同于组件的 UI 测试，但是快照有些时间在其他的某一些场景下使用也非常方便：
  1. // getUserById.ts
  2. const getUserById = async (id: string) => {
  3.   return request.get('user', {
  4.     params: { id }
  5.   })
  6. }
  8. // getUserById.test.ts
  9. describe('getUserById', () => {
  10.   it('可以获取 userId == 1 的用户', async () => {
  11.     const result = await getUserById('1')
  12.     expect(result).toEqual({
  13.       // 非常巨大的一个 JSON 返回...
  14.     })
  15.   })
  16. });
复制代码
比如在上面的示例中，http 哀求返回的效果是比力大的，这个时间就会有一些冗余的代码，在写 expect 断言的时间就会比力贫苦。
这个时间你就可以使用快照：
  1. // getUserById.ts
  2. const getUserById = async (id: string) => {
  3.   return request.get('user', {
  4.     params: { id }
  5.   })
  6. }
  8. // getUserById.test.ts
  9. describe('getUserById', () => {
  10.   it('可以获取 userId == 1 的用户', async () => {
  11.     const result = await getUserById('1')
  12.     expect(result).toMatchSnapshot();
  13.   })
  14. });
复制代码
总结

快照测试是一种简单有用的工具，可以资助开辟者确保组件的渲染输出在差别环境下保持划一。通过公道使用快照测试，可以进步代码的可靠性和可维护性。必要注意的是：

  • 天生小快照：只取紧张的部门来天生快照，确保快照是可读的。
  • 公道使用快照：快照测试不但限于组件测试，可以应用于任何可序列化的内容。
通过遵照这些最佳实践，可以克制快照测试中的“假错误”，确保测试的有用性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

温锦文欧普厨电及净水器总代理
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表