Usando o ChatGPT para escrever testes usando React Testing Library

Recentement, encarei o desafio de testar meus componentes de UI usando o bit.dev e React Testing Library. O meu mentor, obviamente, foi o ChatGPT. Usar o ChatGPT para criar testes usando a React Testing Library pode ser uma ferramenta muito útil para os desenvolvedores. Com o ChatGPT, os desenvolvedores podem rápido e facilmente gerar casos de teste que podem ser usados para validar a funcionalidade de seus componentes React.

Um dos principais benefícios do uso do ChatGPT é que ele permite que os desenvolvedores se concentrem na escrita dos testes em si, em vez de se preocuparem com os detalhes de implementação subjacentes. Isto significa que os desenvolvedores podem escrever testes mais focados na funcionalidade que estão tentando validar, ao invés de se preocuparem com os detalhes específicos de implementação dos componentes que estão testando.

Outra vantagem de usar o ChatGPT é que ele pode ajudar a garantir que os testes sejam consistentes e confiáveis. Como o ChatGPT gera casos de teste baseados em um conjunto de parâmetros pré-determinados, ele pode ajudar a reduzir o risco de erro humano e garantir que os testes sejam confiáveis e repetíveis.

Aqui alguns exemplos que me foram apresentados pelo ChatGPT e que utilizei ipsi litteris:

import React from 'react';
import { render } from '@testing-library/react';
import { ProgressBar } from './progress-bar';

it('should have correct progress width', () => {
  const { getByTestId } = render(<ProgressBar progress={50}></ProgressBar>);

  const progress = getByTestId('progress-div');

  expect(progress).toHaveStyle('width: 50%');
});

it('should have correct progress width when progress is lower than 10%', () => {
  const { getByTestId } = render(<ProgressBar progress={1}></ProgressBar>);

  const progress = getByTestId('progress-div');

  expect(progress).toHaveStyle('width: 10%');
});

Em suma, criei um Card que possui uma barra de progresso no topo, e queria testar se o valor que passava como prop estava realmente sendo recebido e atualizando o tamanho da barra.

Maravilhas da IA na vida do desenvolvedor.

O que voces acharam? Acham que e válido? Usariam no dia a dia?

filipedeschampshá 2 anos

Entrei nesta publicação e estava com zero TabCoins, não entendi, pois este conteúdo é raríssimo, vou até divulgar no Linkedin.

Eu aposto muito que as IAs vão nos auxiliar a escrever testes, ou verificar a validade dos testes (dado que é fácil fazer assertions que provam algo errado como certo), assim como corretores de texto ou de semântica (como o Grammarly) nos ajudam a consertar erros no que escrevemos.

+1 TabCoin!

matheuspazinatihá 2 anos
Tenho certeza que alguém leu ChatGTP no título, e sem ler o conteúdo, já deu -1 TabCoin. Acredito que como nos últimos dias muitas postagens foram feitas utilizando a ferramenta, o pessoal pegou uma certa raiva, mas é importante separar as coisas: Uma coisa é ficar postando textos gerados pelo GPT, sem agregar nada na discussão, e outra coisa é postagens como essa, que tem um alto valor agregado, e que ajuda as pessoas a pensarem nas vantagens de se utilizar o GPT. Parabéns pela postagem.
acfilhohá 2 anos
Que honra mestre! Gostei muito da ideia do TabNews e acho que encontrei meu lugar pra compartilhar minhas ideias. Muito obigado pelo apoio!
CarlosZieglerhá 2 anos

Eu acho valido desde que voce nao fique dependente disso kkk. Usar como pair programing é uma excelente ideia, caso voce fique preso em alguma tarefa eu acho super valido. Minha preocupacao é se voce ficar dependente disso para produzir, e olha que isso pode gerar um vicio onde vc nao precisa raciocinar muito para resolver aguns problemas. E tem a premissa de vc colocar para funcionar e depois nao saber por que funciona. Acho que isso vem ajudar muito a gente mas precisamos nos policiar se o que estamos pegando é uma boa solucao e tambem entender a solicao proposta.

acfilhohá 2 anos
Pra ser honesto, eu nunca havia entrado nos testes antes por medo de ser muito complexo. Mas, com a ajuda do ChatGPT, eu perdi o medo e comecei a entender a logica por tras de se fazer um teste. Hoje me sinto bem mais seguro, e a logica ficou na minha cabeca, logo, vou conseguir escrever ioos testes sem precisar da Ia inicialmente, e so correr la quando tiver um bagulho insano. Pra mim, a IA vai ser sempre uma aliada, e nao uma inimiga.
rogerinhá 2 anos

interessante!

ja tentou o processo inverso?

Criar o test e ele gerar o codigo? :)

acfilhohá 2 anos
Otima ideia! Vou tentar e dou o feedback aqui.
MullerHubhá 2 anos
Ward, quando sair o resultado me avisa nesse comentario tambem por gentileza, ansioso pra saber o real poder dessa IA
rogerinhá 2 anos

Peguei seu codigo e tentei processo inverso, primeiro mostrei o seu teste e ele respondeu assim:

Este é o código de um teste de unidade em React, uma biblioteca JavaScript para construir interfaces de usuário. O teste verifica se o componente ProgressBar tem a largura correta do progresso quando o progresso é passado como um propriedade para ele. O primeiro teste verifica se a largura do progresso é de 50% quando o progresso é de 50%. O segundo teste verifica se a largura do progresso é de, pelo menos, 10% quando o progresso é de 1%. Isso é importante porque é provável que o componente ProgressBar esteja sendo usado para exibir o progresso de uma tarefa, e é importante que o progresso seja exibido corretamente.

Eu: Agora escreva um código com base nesse teste.

import React from 'react';

function ProgressBar({ progress }) {
  let progressWidth = progress;
  if (progress < 10) {
    progressWidth = 10;
  }

  return (
    <div data-testid="progress-div" style={{ width: `${progressWidth}%` }}></div>
  );
}

export default ProgressBar;
ThisEmanoelhá 2 anos

Muitíssimo interessante e válido pra mim! Isso mesmo, criei minha conta e fui lá brincar nessa ferramenta fantástica. E neste momento da minha carreira de Dev estou aprendendo testes, e foi justamente isso que fiz. Obtive alguns erros em que surpreendentemente corrigi a IA, mas outros foram uma mão no código.

alangabrielhá 2 anos

Sensacional, eu já pedi ele pra criar hooks personalizados, mas não tinha nem pensando nessa hipótese criar/validar testes.