reactjs / reactjs/react.dev

Recommend pretty-format library provided by jest

Aberta
#2,929 5 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Abra a seção “Snapshot Testing” da documentação de receitas de testes e compare a recomendação atual do pacote pretty com o pacote pretty-format do Jest. Atualize a recomendação e o exemplo para usar o pacote proposto e, em seguida, verifique se o exemplo continua consistente com o snapshot testing do Jest e se a página não recomenda mais pretty.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation
Tipo de issue
Documentação
Dificuldade
1/5
Tempo estimado
Menos de uma hora
Status de atividade
Estagnada
Clareza
Claramente especificada
Facilidade para iniciantes
45/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.