reactjs / reactjs/react.dev

Recommend pretty-format library provided by jest

未关闭
#2,929 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
JavaScript
星标
11.8k
派生
7.9k
平均合并
1 天 11 小时
30 天内合并 PR
11

描述

I was going through the testing recipes and noticed that the documentation recommends a npm module for pretty printing HTML for snapshot: https://reactjs.org/docs/testing-recipes.html#snapshot-testing.

In this example, we render a component and format the rendered HTML with the pretty package, before saving it as an inline snapshot...

The package is this: https://www.npmjs.com/package/pretty. There is another, imo stronger candidate to replace this package, which is pretty-format. Why would this be better? Its part of jest and the example code in the documentation is already using jest. Therefor it would be better to recommend a dependency from a source that the reader is already more likely to be using other dependencies from (which in this case is jest).

You can pretty print HTML with pretty-format like so:

import prettyFormat from 'pretty-format';

const pretty = (dom: HTMLElement): string => {
  return prettyFormat(
    dom,
    {
      plugins: [ prettyFormat.plugins.DOMElement ]
    }
  )
}

...

expect(
  pretty(container)
).toMatchInlineSnapshot(); /* ... gets filled automatically by jest ... */

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

打开测试配方文档中的 Snapshot Testing 部分,将其中当前对 pretty package 的推荐与 Jest 的 pretty-format package 进行比较。更新推荐和示例以使用提议的 package,然后验证示例仍与 Jest snapshot testing 保持一致,并且页面不再推荐 pretty。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react
领域
documentation
Issue 类型
文档
难度
1/5
预计耗时
1 小时以内
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。