Recommend pretty-format library provided by jest
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
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 ... */
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Öffne den Abschnitt „Snapshot Testing“ in der Dokumentation zu den Testrezepten und vergleiche die aktuelle Empfehlung für das Paket pretty mit dem Paket pretty-format aus Jest. Aktualisiere die Empfehlung und das Beispiel so, dass sie das vorgeschlagene Paket verwenden, und überprüfe anschließend, dass das Beispiel weiterhin mit dem Snapshot Testing von Jest übereinstimmt und die Seite pretty nicht mehr empfiehlt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 1/5
- Geschätzter Aufwand
- Unter einer Stunde
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 45/100