Jest——JS测试框架 | 云端思绪录

type

Post

status

Draft

date

Apr 3, 2024

slug

Jest-intro

summary

一入测试深似海，本文介绍了Jest主要特点和基本的使用，以及一些的功能

📝 主旨内容

主要特点

易于设置和使用：Jest 旨在提供零配置的测试体验，简化测试过程。

内置模拟支持：易于模拟对象、导入依赖等，非常适合单元测试和组件测试。

快照测试：快照功能允许开发者保存组件或数据结构的“快照”，并在后续测试中与新的输出进行比较。

优异的性能：通过并行测试执行和智能测试运行来优化性能。

丰富的断言库：提供广泛的断言方法，便于编写各种测试用例

Jest 丰富的断言库

When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things.

https://jestjs.io/docs/expect

建议写jest断言，将gpt和文档结合起来看，单看文档会陷入‘旋涡’，单看gpt其实没有意义

快照测试

其实这个概念之前就看过了，只不过一直没来得及使用，现在重新看一遍

Jest 快照测试是 Jest 测试框架提供的一种非常有用的功能，旨在帮助开发者测试 UI 组件或其他数据结构的输出是否符合期望。快照测试通过比较组件或数据结构的当前渲染输出与之前保存的“快照”来工作。如果当前输出与快照不匹配，测试将失败，从而提醒开发者输出的变化可能是意外的或错误的。这种测试方式非常适合确保 UI 或数据不会无意中发生变化

快照测试的工作原理

当你第一次运行一个快照测试时，Jest 会自动创建一个快照文件，该文件包含了你的组件或数据结构的序列化输出。在后续的测试运行中，Jest 会将新的输出与存储的快照进行比较。如果输出发生变化，Jest 会标记测试为失败，并详细显示差异。这时，你可以检查变化是否为预期的：

如果变化是预期的，你可以更新快照，使之包含新的输出。

如果变化是意外的，你则需要检查代码中的问题。

简单示例

要在 Jest 中使用快照测试，首先确保你已经安装并配置了 Jest。然后，你可以在测试文件中使用expect(...).toMatchSnapshot()来执行快照测试。

以下是一个简单的示例：

在这个例子中，react-test-renderer 用于渲染 React 组件并将其转换为 JSON 格式。然后，使用 toMatchSnapshot 方法比较渲染的输出与存储的快照。

虽然快照测试非常强大，但它们也有局限性。它们并不能验证 UI 的功能性或交互性；它们只能确保输出没有意外变化。因此，快照测试最好与其他类型的测试（如单元测试和集成测试）结合使用，以提供更全面的测试覆盖率。此外，当 UI 经常变动时，频繁更新快照可能会增加维护成本。因此，合理地使用快照测试，并在适当的场景下将其与其他测试方法结合，可以最大化测试效率和效果。

🤗 总结归纳

享受你的测试之旅吧哈哈哈哈，如果使用vite构建你的项目，你也可以看看vitest哦，是另一种测试框架，写测试的话，强烈推荐webstorm编辑器，炒鸡友好！

📎 参考文章/链接

getting-started： https://jestjs.io/docs/getting-started

Jest expect ：https://jestjs.io/docs/expect

💡

有关这篇博客的任何问题，欢迎您在底部评论区留言，我会在github邮箱中第一时间收到邮件，让我们一起交流~