reactjs / reactjs/react.dev

Recommend pretty-format library provided by jest

Đang mở
#2,929 5 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
11

Mô tả

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 ... */

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Mở phần Snapshot Testing trong tài liệu các công thức kiểm thử và so sánh khuyến nghị hiện tại về package pretty với package pretty-format của Jest. Cập nhật khuyến nghị và ví dụ để sử dụng package được đề xuất, sau đó xác minh rằng ví dụ vẫn nhất quán với snapshot testing của Jest và trang không còn khuyến nghị pretty nữa.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react
Lĩnh vực
documentation
Loại issue
Tài liệu
Độ khó
1/5
Thời gian dự kiến
Dưới một giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.