Como testar sites e aplicativos reagir

Sep 11, 2025

Como

(Crédito da imagem: futuro)

Se você quiser saber como testar reagir, você está no lugar certo. Você realmente sabe que seu código faz o que é suposto fazer? Você testou no navegador? E se você não tiver, ou não pode testar tudo, e quebra na produção?

Uma biblioteca de testes é um grupo de desenvolvedores de utilitários usa para escrever testes individuais em componentes de aplicativos. Algumas das principais partes de um teste são:

Descrição: descreve o que é o teste sobre
Use / render: usa o componente em um ambiente onde ele pode ser testado
Zombando: cria funções fingidas, para que você possa verificar suas suposições

Ao longo deste artigo, vou explorar alguns exemplos da biblioteca de testes reagir para ajudá-lo a começar com essa maneira valiosa de melhorar a robustez da sua saída de código, bem como garantir que seu código não jogue alguma surpresa desagradável uma vez que entra em produção.

Quer recursos mais úteis? Aqui está um resumo do melhor Web Design Tools. em torno disso, isso vai ajudá-lo a trabalhar mais esperto. Ou se você precisar de uma nova máquina, tente este roundup do melhores laptops para programação . Ou se você está construindo um novo site, você pode precisar de um ótimo Construtor de sites .

01. Comece com a biblioteca de testes reagir

Eu vou usar o aplicativo Create-reagir para esta demonstração porque já vem pré-configurado com a biblioteca de testes. Se você estiver usando Gatsby ou uma configuração personalizada, pode haver alguma configuração necessária para executar antes de começar a usar a biblioteca de testes.

Para começar, vamos criar um novo aplicativo. Se você tiver uma versão recente do Node.js já, você pode executar o seguinte comando sem instalar qualquer outra coisa globalmente:

npx create-react-app netmag-javascript-testing

02. Decida o que testar

Imagine que temos um componente simples, digamos um botão com algum estado. Quais são algumas das coisas que precisam testar em um componente como este?

●. A aparência do componente:

Nós não queremos que nada mude inesperadamente depois de escrevemos nosso componente. Então, vamos escrever um teste de instantâneo para capturar como ele renderiza. Então, se alguma coisa mudar, veremos rapidamente sem um teste manual ou visual. Isso é ótimo para componentes que consistem em muitos componentes menores: você pode ver rapidamente quando (e onde) sua aparência foi afetada.

●. Os diferentes ramos que rendem:

Porque poderíamos ter duas ou mais saídas diferentes, precisamos testá-lo é corrigindo todos eles corretamente, não apenas um deles. Portanto, precisamos simular um evento de clique e ter outro teste de instantâneo para a maneira como ele renderiza depois que este ramo do código foi executado.

●. Que funções são chamadas como esperado:

Queremos garantir que o código que escrevemos para chamar outra função funciona como assumiríamos. Mas desde que essa função é uma dependência externa, não queremos testar isso aqui. Nossos testes devem encapsular apenas a funcionalidade que queremos.

03. Escreva seu primeiro teste

Vamos escrever nosso primeiro teste. Crie um novo arquivo chamado Mycomponent.unit.test.js. na mesma pasta que o componente. Ao adicionar test.js no final, será automaticamente escolhido pela biblioteca de testes. O conteúdo desse arquivo está abaixo:

 Importação reaja de 'reagir'
Importar {Render} de '@ testing-biblioteca / reagir'
importar mycomponent de './mycomponent'
descrever ('o & lt; mycomponent / & gt;', () = & gt; {
    // Testes vão aqui
})

A primeira coisa que quero chamar sua atenção para é o descrever() Função, que leva dois argumentos: A primeira é uma string que você pode usar para descrever melhor - como uma seqüência de texto - o que seu teste vai fazer. No nosso caso, simplesmente dissemos que deveria renderizar. Isso é muito útil quando alguém olha para o seu código ou você tem que lembrar o que você fez em um estágio posterior. Escrever boas declarações de descrever é uma forma de documentação de código e outra boa razão para escrever testes.

O segundo argumento são seus testes. O descrever() a função executará todos esses testes um após o outro.

04. Use a função de limpeza

Vamos introduzir uma função auxiliar chamada Ansoio () . Precisamos usar isso porque cada vez que fizemos algo com o componente, queremos uma cópia fresca sem os adereços que anteriormente tivemos passado até mesmo existentes no componente. Ou podemos precisar restringir novamente o componente: Ansoio () Faz isso para nós e podemos passar a função de limpeza.

 Import {Render, Cleanup} de '@ testing-biblioteca / reagir'
...
descrever ('o componente deve render', () = & gt; {
  Ansoio (limpeza)
}

05. Escreva um teste de instantâneo

Nesta etapa, vamos 'montar' nosso componente (ou torná-lo).

 Descreva ('o componente deve render', () = & gt; {
  Ansoio (limpeza)
  ('Renders com adereços básicos', () = & gt; {
    Render (& lt; mycomponent / & gt;)
  })
}

Isso se torna acesso a todas as propriedades renderizadas do componente compilado. Pode ser bom deixar isso em um console.log () Então você pode ver mais claramente o que faz.
Se você fizer isso, você verá que há algumas propriedades úteis que podemos aproveitar aqui. Eu vou fazer uma afirmação (fazer uma declaração testável) e testá-la extraindo o contêiner. O contêiner 'contém' os nós DOM (todos os HTML) associados ao componente.

 IT ('Renders com adereços básicos', () = & gt; {
    const {contêiner} = render (& lt; mycomponent / & gt;)
})

Agora temos acesso ao recipiente, como eu digo que é renderizado de acordo com minha afirmação? Adicionando um teste de instantâneo.

Pense em um instantâneo como sendo uma fotografia. É preciso um instantâneo do nosso componente em um ponto específico no tempo. Então, sempre que fizermos alterações ao código, podemos ver se ainda corresponde ao instantâneo original. Se isso acontecer, podemos estar confiantes de que nada mudou no componente. No entanto, se isso não acontecer, poderíamos ter descoberto um problema que se originou em outro componente, um que poderíamos não ter visto anteriormente:

06. Propriedades do teste

Props, ou propriedades, de um componente podem ser testados com instantâneos também. Testando os diferentes adereços que você fornece ao seu componente lhe dará maior cobertura e confiança. Você nunca sabe quando uma exigência vai significar que os adereços do seu componente são refatorados e a saída final será alterada.

Adicione o seguinte objeto à parte superior do seu arquivo:

 Const LightProperties = {
    BackgroundColour: 'Branco',
    TextColour: 'Darkblue'
}

Definimos as propriedades em um objeto e usamos o operador de propagação (três pontos seguidos pelo nome do objeto: ... LightProperties) Porque só podemos passar um argumento quando prestamos assim. Também é útil ver quais propriedades você está passando isoladamente:

 IT ('Renders com adereços básicos', () = & gt; {
        const {contêiner} = render (& lt; mycomponent / & gt;
      )
     Espere (contêiner) .tomatchsnapshot ()
    })
    É ("renderiza com os adereços da versão de luz", () = & gt; {
        const {contenter} = render (
            & lt; mycomponent {... LightProperties} / & gt;
        )
        Espere (contêiner) .tomatchsnapshot ()
    })

07. Teste alterações na interface do usuário

Imagine nosso componente tem um botão e você quer ter certeza de que algo acontece quando o botão é clicado. Você pode pensar que deseja testar o estado do aplicativo; Por exemplo, você pode ser tentado a testar que o estado atualizou. No entanto, esse não é o objeto desses testes.

Isso nos apresenta a um conceito importante no uso de uma biblioteca de testes: não estamos aqui para testar o estado ou a maneira como nosso componente funciona. Estamos aqui para testar como as pessoas vão usar o componente e que atenda às suas expectativas.

Então, se o estado atualizado ou não é imaterial; O que queremos testar é o que o resultado dessa imprensa é.

Vamos imaginar que estamos testando o resultado de uma função que altera a interface do usuário do modo escuro para o modo de luz. Aqui está o componente:

 const modetoggle = () = & gt; {
    const [modo, setMode] = usestate ['Light']
   const togletheme = () = & gt; {
     if (tema === 'luz') {
       setttheme ('escuro')
     } outro {
       settheme ('luz')
     }
   }
    Retorna (
        & lt; togglebutton data-testId = "modificar" lightmode = {mode} onclick = {togglemode} & gt;
          Toggle Mode.
        & lt; / togglebutton & gt;
    )
}

Primeiro, devemos adicionar um ID de teste no botão para que possamos encontrá-lo na fase de renderização:

 Return (
    & lt; togglebutton
      Data-TestID = "Alternar modo"
      lightmode = {mode}
      onclick = {togglemode}
     & gt;
      Toggle Mode.
    & lt; / togglebutton & gt;

Você notou que adicionamos o novo atributo? Data-TestID. para o botão? Veja como você pode testar isso. Primeiro, importe uma nova função, firevent da biblioteca de testes:

 Importar {limpeza,
          fireevent,
          render
} de '@ testing-biblioteca / reagir'

Podemos usar essa função para testar, há mudanças na interface do usuário e que essas alterações são consistentes:

 IT ('Renders com adereços básicos', () = & gt; {
    const {contenter} = render (& lt; togglebutton / & gt;
  )
 Espere (contêiner) .tomatchsnapshot ()
})
('Renderiza a UI da luz no clique', () = & gt; {
    const {contêiner, getbytestid} = render (& lt; togglebutton / & gt;)
    fireevent.click (GetBytestid ('Mode-Toggle'))
    Espere (contêiner) .tomatchsnapshot ()
})

Isso é ótimo: não precisamos ir manualmente para o site e olhar em volta e, em seguida, clique no botão e olhar em volta da segunda vez - durante o qual, você pode admitir, você provavelmente esquecerá ou esquecerá alguma coisa! Agora podemos ter confiança de que, dada a mesma entrada, podemos esperar a mesma saída em nosso componente.

Quando se trata de testar IDs, eu pessoalmente não gosto de usar Data-TestID. para encontrar algo no dom. Afinal, o objeto dos testes é imitar o que o usuário está fazendo e para testar o que acontece quando eles fazem. Data-TestID. Parece um pouco de trapaça - embora os testídeos de dados provavelmente possam ser úteis para o seu engenheiro de QA (veja o boxout o papel dos engenheiros de garantia de qualidade).

Em vez disso, poderíamos usar getbytext () e passe no texto do nosso botão. Esse método seria muito mais comportamento específico.

08. zombar e espionar a função

Às vezes, talvez precisemos testar uma chamada para uma função, mas essa função está fora do escopo do teste. Por exemplo, eu tenho um módulo separado que contém uma função que calcula o valor do PI para um determinado número de decimais.

Eu não preciso testar qual é o resultado desse módulo. Eu preciso testar que minha função se espera. Para mais informações sobre por que isso é, por favor veja os testes de unidade e integração da caixa. Nesse caso, poderíamos "zombar" essa função:

 const getPivalue = jest.fn ()
('Chama a função no clique', () = & gt; {
    const {contêiner, getbytestid} = render (& lt; togglebutton / & gt;)
    fireevent.click (GetBytestid ('Mode-Toggle'))
    Espere (getPivalue) .parbeenCalledtimes (1)
  )
})

A função TohaveBeenCalledtimes () é uma das muitas funções auxiliares na biblioteca de testes que nos permitem

para testar a saída de funções. Isso nos permite não apenas escopo nossos testes apenas ao módulo que queremos testar, mas também significa que podemos "espionar" ou ver o que nossa função faz quando chama essa função.

09. Iniciar testes reagir aplicativos

Os testes de escrita podem parecer um pouco assustador para começar. Espero que este tutorial tenha lhe dado um pouco mais de confiança para experimentá-lo. Como comecei a escrever testes para minhas aplicações, eu realmente não posso voltar: Eu posso descansar mais fácil, sabendo que estou deixando para trás um legado muito melhor para aqueles que usarão meu trabalho no futuro.

Para mais ideias sobre como testar seus componentes, visite Reagir biblioteca de testes ou Reagir exemplos de teste . Se você está procurando alguns cursos para ajudá-lo a começar, aquele por kent c dodds (Quem escreveu e mantém a biblioteca de testes reagir) é popular. Eu também gostei este em tutoriais de nível É aquele que me fez começar a escrever testes para o meu código.

Lembre-se, se você está construindo um site complexo, você vai querer obter o seu hospedagem na web. local de serviço. E se esse site puder conter muitos ativos, armazená-los em confiança armazenamento na núvem é crucial.

Este conteúdo apareceu originalmente em Revista Net. . Leia mais do nosso Artigos de web design aqui .

Consulte Mais informação:

HTML6: O que é e quando chegou?
Escreva o código HTML mais rápido
Design de aplicativo móvel: um guia para iniciantes

Como - Artigos mais populares

Como testar sites e aplicativos reagir

01. Comece com a biblioteca de testes reagir

02. Decida o que testar

03. Escreva seu primeiro teste

04. Use a função de limpeza

05. Escreva um teste de instantâneo

06. Propriedades do teste

07. Teste alterações na interface do usuário

08. zombar e espionar a função

09. Iniciar testes reagir aplicativos

Como - Artigos mais populares

Como esticar uma tela e configurar para tintas de óleo

Construir terreno em Houdini 17

Aprenda a modelar uma pessoa 3D em Zbrush e Maya

Como construir um aplicativo AR

Esculpir anatomia realista em zbrush

Como misturar lápis de cor

Aprenda a executar o design e os sprints de conteúdo

Top Dicas para Pintura Mãos Expressivas

Categorias