介绍

认识 Jest Preview

我们相信你已经厌倦了调试集成 UI 测试和阅读一大堆隐晦的 HTML 输出。要将 DOM 结构可视化，并发现那里出了问题以及为什么出了问题，这实在是相当困难。我们感同身受。这就是为什么我们创建了 Jest Preview！

Jest Preview 是一个开源库使你的测试更轻松。它可以让你直接在浏览器中看到测试输出，就像你平时看你在做的应用程序一样。编写测试并观察渲染输出的相应变化，Jest Preview 让你专注于“真正的”的测试，而不是破译 HTML 代码。听起来是不是很有趣？快来试试吧 😉

👇 继续阅读以了解更多信息并尝试 Jest Preview 的操作

信息

你可以直接前往 安装 指南，并在本地安装它

特性

• 🐣 它的安装和使用都非常简单！
• 👀 在浏览器中以毫秒级的速度预览你的实际应用的 HTML
• 🔄 当执行 preview.debug() 时自动刷新浏览器
• 💅 支持的 CSS：
  • ✅ 直接引入 CSS
  • ✅ 相当多的 CSS-in-JS 库，例如：
    • ✅ Styled-components
    • ✅ Emotion
  • ✅ 全局 CSS
  • ✅ CSS Modules
  • ✅ Sass
• 🌄 支持查看图片
• 🧑‍💻 我们的贡献者正努力增加更多功能并提供支持 ⚙️

信息

愿意参与贡献吗？太棒了！我们非常感谢！请查看 贡献 文档 🙏

在线 Demo

想要在安装前尝试一下这个库吗？我们为你准备好了！前往 StackBlitz Demo App 或在此尝试 😉

与框架无关

Jest Preview 最初是为了与 jest 和 react-testing-library 一起使用。这个库与框架无关，你可以将其与任何测试库使用

如何只用两行代码使用 Jest Preview

通过运行 CLI 命令 jest-preview 来启动 Jest Preview 本地服务器。更好的教程请参考 安装 指南

+import preview from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    preview.debug();
  });
});

或：

+import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    debug();
  });
});

就是这么简单！😱