Menu

Como testar aplicativos React usando Jest Framework

how test react apps using jest framework

Experimente Nosso Instrumento Para Eliminar Problemas

Neste tutorial em vídeo, aprenderemos a criar e testar um aplicativo React usando Jest, Mocking usando as funções Jest e Spying usando o comando Jest spyOn:

PARA Introdução completa de Jest foi dado em nosso tutorial anterior. Neste tutorial, veremos como usar o Jest para testar aplicativos baseados no React.

Vamos aprender a criar um aplicativo React bootstrapped usando um simples acima do nível do mar comando baseado e usar o mesmo aplicativo para escrever testes de reação Jest. Também exploraremos o conceito de teste de instantâneo e saberemos como você pode simular e espionar componentes React usando a estrutura Jest e o comando Jest spyon.

Testando Apps React e simulações e espiões do Jest

O que você aprenderá:

React - Primeiros passos

Jest foi construído para testar aplicativos React extensivamente, juntamente com o suporte para todas as outras estruturas JavaScript.

Como usaremos o aplicativo React para adicionar a estrutura e os testes do Jest, é imperativo e, na verdade, um pré-requisito ter um conhecimento básico dos aplicativos React.

Para começar com um aplicativo React básico, siga as etapas abaixo:

# 1) Para criar um aplicativo React, você pode simplesmente usar um executor de pacote de nó (ou seja, npx, que também vem com o npm) e executar o comando abaixo.

npx create-react-app my-app

#dois) Depois que o comando acima for concluído, abra o projeto my-app em qualquer editor de sua escolha - o Visual Studio Code que está disponível gratuitamente é recomendado.

# 3) Na janela de terminal / comando (dentro do editor), execute o projeto usando o comando abaixo.

npm start

# 4) Assim que o projeto for compilado, ele abrirá uma nova guia do navegador com o URL http: // localhost: 3000

# 5) Além disso, observe que todas as dependências relacionadas ao Jest vêm instaladas como parte do projeto React criado usando o comando npx mencionado acima.

# 6) O projeto também inclui uma biblioteca de teste React chamada jest-dom que tem muitos matchers de elementos DOM personalizados úteis para Jest. (Verificar aqui para mais detalhes sobre os conceitos do React)

Há teste de instantâneo

O teste de instantâneo é uma técnica muito útil para testar instantâneos do componente React usando a biblioteca Jest.

Vamos primeiro tentar entender o teste de instantâneo essencialmente significa.

O instantâneo nada mais é do que uma representação pontual de qualquer coisa. Por exemplo, uma captura de tela, uma imagem de câmera, etc., são todos instantâneos que representam os detalhes de qualquer coisa em um determinado momento.

Da perspectiva do React, o Snapshot nada mais é do que uma representação de um ponto no tempo ou saída de um componente React com o estado e comportamento fornecidos.

Isso é explicado com um exemplo simples usando as etapas abaixo.

# 1) Para começar o teste de instantâneo, adicione o pacote npm “react-test-renderer” usando o comando abaixo.

npm i react-test-renderer

#dois) Agora, vamos criar um componente React simples que será nosso aplicativo em teste. Este componente terá um estado simples na forma de variáveis ​​de classe e propriedades de página.

O componente teria a aparência mostrada abaixo. Vamos nomear este componente como Link (e assim o nome do arquivo do componente react correspondente será Link.react.js)

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }

Neste momento, é assim que a estrutura do arquivo será exibida para o projeto React.

Estrutura de arquivo para o projeto React

# 3) Vamos adicionar um teste de instantâneo para este componente.

para) Para começar com o teste de instantâneo - o pacote Node react-test-renderer é um pré-requisito. Instalar react-node-renderer usando o comando abaixo.

npm i react-test-renderer

b) Adicione um novo arquivo para adicionar testes para este novo componente. Vamos chamá-lo de Link.test.js

c) Agora adicione um teste de instantâneo. Aqui, primeiro criaremos um instantâneo renderizando o componente React.

O teste seria semelhante ao mostrado abaixo.

import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });

Aqui no teste, estamos criando uma representação JSON do componente renderizado. Passamos o valor da propriedade “page” como “www.softwaretestinghelp.com”

d) Quando o teste de instantâneo é executado - um arquivo de instantâneo do componente é criado (com a extensão .foto ) e salvo no diretório do projeto que é reutilizado durante as próximas execuções de teste.

Nesse caso, um arquivo de instantâneo com a propriedade da página fornecida durante o teste seria usado. Vamos ver o arquivo de instantâneo sendo gerado após executar o teste usando o comando “npm test”.

é) Um arquivo de instantâneo é criado em um diretório denominado “__snapshots__” no diretório src do projeto.

modelo em cascata no ciclo de vida de desenvolvimento de software

A seguir está a estrutura do projeto para isso.

Diretório “__snapshots__”

O diretório “__snapshots__” na captura de tela acima é criado no diretório raiz do projeto quando o teste é executado pela primeira vez.

f) Vamos ver como ficará o arquivo de instantâneo.

Abrir arquivo - Link.test.js.snap

Arquivo de instantâneo

g) Acima é mostrado o instantâneo que é armazenado para o componente fornecido.

h) Agora, por exemplo, a implementação dos componentes acima muda. Por exemplo, vamos mudar o nome da página de propriedade para um site no componente e vamos tentar executar o teste novamente.

É assim que o componente é alterado (alteramos a propriedade denominada page para uma nova propriedade denominada site).

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }

Agora vamos tentar executar os testes novamente. Como já temos os instantâneos no diretório do projeto, espera-se que nosso teste falhe neste cenário - pois o código do componente foi alterado e a correspondência do instantâneo antigo será uma falha.

A seguir está o resultado que obtemos ao executar o teste:

O código do componente mudou

(eu) Agora, vamos supor que essas mudanças sejam as mudanças necessárias e exijam que nossos testes atualizem o instantâneo antigo. Nesse caso, execute os testes com o comando update que sobrescreveria o instantâneo antigo e criaria um novo com base nas novas mudanças no próprio componente.

Comando de execução

yarn test -u

(j) Com o comando acima e a asserção atualizada, você verá a aprovação no teste.

Assim, o teste de instantâneo geral é uma técnica útil para testar todo o componente em relação à visualização final e armazenar o resultado antigo como um instantâneo, o que garante que nenhum problema de regressão seja introduzido como resultado de alterações de código ou recursos ou qualquer refatoração para o componente existente.

Tutorial de vídeo: há teste de instantâneo

Zombando usando Jest

Nesta seção, veremos como podemos usar as simulações do Jest. Os mocks podem ser usados ​​de várias maneiras, conforme mostrado abaixo.

Por exemplo,

  1. Zombar de todo o Componente React
  2. Simulação de funções únicas ou múltiplas - Isso não é específico para qualquer estrutura de desenvolvimento Javascript. Como o Jest é uma biblioteca de teste de javascript que não é específica para nenhuma estrutura em particular, podemos até mesmo usar o Jest para simular um arquivo Javascript antigo que contém funções.
  3. Simulação de chamadas de API usadas dentro de funções ou código Javascript - podemos usar Jest para simular respostas de integração de terceiros.

Vamos discutir cada um desses métodos de simulação em detalhes.

Mocking React Components

O aplicativo React é composto por vários componentes dependentes uns dos outros. Para uma compreensão simples, considere o React Component como uma classe - tendo apresentação e lógica.

Como qualquer sistema complexo construído com a Programação Orientada a Objetos é composto de várias classes, da mesma forma, o React App é uma coleção de componentes.

Agora, quando testamos um componente, queremos garantir que não haja dependências que afetem o teste, ou seja, se houver 2 componentes, dos quais o componente em teste é dependente, se tivermos os meios para simular os componentes dependentes, então podemos testar a unidade do componente em teste de uma forma mais completa.

Vamos tentar entender isso com a ajuda da figura abaixo:

Mocking React Components

Aqui temos o Componente 1, que depende dos Componentes 2 e 3.

Durante o teste de unidade Component1, podemos substituir o Component2 e Component3 usando Jest Mocks por suas contrapartes falsas ou simuladas.

Vamos ver como podemos configurar esses mocks. Usaremos componentes simples com um texto Html colocado dentro de um div. Primeiro, veremos o código para componentes dependentes - Componente2 e Componente3 .

import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3

Agora, vamos ver como será a aparência do Componente1 que tem componentes dependentes. Aqui você pode ver que estamos importando os componentes dependentes e usando-os como uma tag HTML simples como & respectivamente.

import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1

Agora, vamos ver como podemos escrever testes para este componente. Para criar um teste, crie uma pasta “testes” no diretório “src”. Isso é apenas para garantir que nosso diretório de projetos permaneça limpo e organizado.

import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })

No arquivo de teste acima, você pode ver que simulamos os Componentes 1 e 2 usando a função is.mock

jest.mock('../components/component2', () => () => Hello Mock Component2 )

Esta configuração irá simplesmente substituir todas as invocações de Component2 por esta representação simulada. Portanto, quando renderizamos o Component1 no teste, ele chama a versão simulada do Component2, que também afirmamos verificando se os elementos div Mock existem no documento.

Usamos o matcher ‘toBeInTheDocument () aqui. Esse matcher é React Specific, pois a saída final renderizada dos aplicativos React nada mais é do que código HTML. Portanto, esse matcher procura o elemento HTML fornecido para estar presente no documento HTML criado pelo React.

Tutorial de vídeo: Jest - Componentes do Mock React

Zombar de funções usando Jest

Agora, vamos ver como podemos usar as simulações do Jest, para simular uma função específica para um determinado arquivo JavaScript.

Zombar de funções usando Jest

Na figura acima, você pode ver que estamos substituindo a função 2, que é a dependência da função 1, por uma versão fragmentada / simulada da função 2

Criaremos primeiro um arquivo JavaScript de teste que servirá como um aplicativo em teste e simularemos alguns métodos para ilustrar o conceito de função de simulação.

function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}

Temos 2 funções aqui, ou seja, greet () e getFullName (). A função greet () usa getFullName () para obter o nome completo. Veremos como podemos substituir a função getFullName () por sua implementação simulada enquanto testamos o método greet ().

Vamos escrever um teste simples para simular esse comportamento usando a função simulada Jest e ver como podemos validar se a função simulada foi chamada ou não.

test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })

Aqui, declaramos uma função simulada Jest e configuramos um valor de retorno como “nome simulado” que será retornado quando a função for chamada.

const mock = jest.fn().mockReturnValue('mocked name')

Além disso, para validar que o mock foi chamado, podemos usar os matchers Jest conforme mostrado abaixo.

  • toHaveBeenCalled () - Valida se o mock foi chamado.
  • toHaveBeenCalledWith (arg1, arg2) - Valida se o mock foi chamado com os argumentos fornecidos.
  • toHaveBeenCalledTimes (n) - Valida o número de vezes que o Mock teria sido chamado.

Existe outro recurso do Jest que é chamado de Spy.

Então, o que são Spies e como eles diferem de mocks?

Na maioria das vezes, Spies permite a chamada de função real, mas pode ser usado para validar coisas como quais argumentos foram usados ​​para chamar o método e também para verificar se a chamada do método aconteceu ou não.

Espiar no Jest pode ser feito através de Há spyOn comando. Jest spyOn leva argumentos como o objeto e a função real a ser espionada, ou seja, ele realmente chamará a função em teste e atuará como um interceptor intermediário.

test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })

Portanto, no código acima, você pode observar que:

(eu) Nós configuramos um método espião ‘getFullName’ usando o comando abaixo.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

(ii) Em assertivas, estamos verificando se o espião foi chamado com os argumentos esperados.

expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')

O comando Jest spyOn também pode ser usado para especificar uma implementação simulada que deve ser chamada em vez da função real usando o comando abaixo.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()

Neste caso, a chamada de função real é substituída por uma implementação simulada que é configurada com o espião.

Tutorial de vídeo: Jest- Mock Api Functions

Simulação de chamadas de API externas usando Jest

Na figura abaixo, você pode ver que function1 faz chamadas para um endpoint de API externo. Por exemplo - chamando um endpoint de parceiro de pagamento que dá uma resposta de sucesso ou falha.

Agora, quando estamos escrevendo testes de unidade para esta função, não podemos esperar chamar o endpoint externo toda vez que os testes forem executados.

Existem alguns motivos pelos quais você evita chamar terminais externos no teste.

  • Pode envolver custos.
  • Sua resposta não pode ser controlada. Nem sempre você pode testar todas as respostas esperadas e códigos de erro.
  • Pode não estar sempre disponível - se o ponto de extremidade externo não estiver disponível, os resultados do teste serão instáveis.

Simular chamadas de API externas usando Jest

Por todos esses motivos, seria muito útil se pudéssemos controlar e criar um stub do comportamento do ponto de extremidade externo e criar testes de unidade robustos para nossa função.

Vamos ver como podemos conseguir chamadas de API de simulação usando o framework Jest. Axios é um módulo NPM que pode ser baixado / adicionado ao projeto usando o comando abaixo.

npm install --save-dev axios

Estaremos usando o módulo 'axios' para fazer chamadas de API em nossa função de teste, conforme mostrado abaixo.

function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }

Estamos atingindo um endpoint externo fictício que retorna dados falsos e registra respostas de sucesso e erro.
Agora, em nosso teste de unidade, vamos simular o módulo axios e retornar uma resposta falsa ou simulada quando a função chamar este ponto de extremidade externo.

O código de teste será semelhante ao mostrado abaixo.

const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })

Aqui, é importante entender que estamos simulando todo o módulo 'axios', ou seja, qualquer chamada que for para o módulo Axios durante a execução do teste irá para a implementação simulada e retornará uma resposta conforme configurada no teste.

O módulo é simulado usando o comando abaixo.

const axios = require('axios') jest.mock('axios');

Configuramos o mock usando o comando abaixo.

axios.get.mockResolvedValue(mockedResponse)

Dessa forma, podemos simular respostas de terminais de API externos. Aqui nós usamos um endpoint ‘GET’, mas a mesma abordagem pode ser usada para outros endpoints como POST, PUT, etc.

Tutorial de vídeo: Jest - Mock Api Endpoints

Conclusão

Neste tutorial, aprendemos como criar um aplicativo React simples e vimos como o Jest React pode ser usado para realizar testes de instantâneo em componentes React e simular componentes React como um todo.

Também exploramos sobre Mocking usando funções Jest e Spying usando o comando Jest spyOn que chama a implementação real do método e atua como um interceptor para afirmar coisas como o número de invocações, argumentos com os quais o método foi chamado, etc.

PREV Tutorial | PRÓXIMO Tutorial

como abrir arquivos eps no windows 10

Leitura recomendada

^