Teste não está rodando conforme esperado pela instruções (bug de React is not defined) | React JS: crie testes com Jest e Testing Library e garanta o funcionamento do Front-end

Olá, tudo bem?

Estou fazendo o curso de JEST com React Library e logo no primeiro teste ele pediu para escrevermos:

import { render, screen } from '@testing-library/react';
import Cabecalho from './index';

test('Deve renderizar o nome do usuário logado', () => {
  render(<Cabecalho />);
  const nomeUsuario = screen.getByText('Joana Fonseca Gomes');
  expect(nomeUsuario).toBeInTheDocument();
});

O professor roda no console e lá deu bom, aqui pra mim dá:

 FAIL  src/componentes/Cabecalho/Cabecalho.test.js
  ✕ Deve renderizar o nome do usuário logado (4ms)

  ● Deve renderizar o nome do usuário logado

    ReferenceError: React is not defined

      3 |
      4 | test('Deve renderizar o nome do usuário logado', () => {
    > 5 |   render(<Cabecalho />);
        |          ^
      6 |   const nomeUsuario = screen.getByText('Joana Fonseca Gomes');
      7 |   expect(nomeUsuario).toBeInTheDocument();
      8 | });

      at Object.<anonymous> (src/componentes/Cabecalho/Cabecalho.test.js:5:10)

Eu resolvi o erro declarando um import React from 'react' dentro do teste, mas sei que isso não deveria ser feito. O jest deveria incluir já isso no momento me que carrega.

Infelizmente, o curso está bem pobre se tratando de configurações de ambiente básica. Tive vários problemas com o node (pelo curso não especificar qual versão de node eu deveria utilizar - fui por tentativa e erro) entre outros mais.

Neste caso, eu estou seguindo o curso importando o React em cada arquivo de teste, mas gostaria de entender o que eu preciso fazer para não ter esse problema mais e sem seguir implementando essa tag de import do React em cada arquivo de teste.

Podem me auxiliar, por gentileza?

Olá João, tudo bem?

Entendo a sua frustração em relação aos problemas que está enfrentando no curso. Vou tentar te ajudar com o erro que está ocorrendo.

O erro "React is not defined" geralmente ocorre quando o Jest não consegue encontrar o React no escopo do teste. Isso pode acontecer por alguns motivos, como a falta de configuração do Jest para trabalhar com o React.

Uma solução para isso é configurar o Jest para trabalhar com o React. Isso pode ser feito adicionando um arquivo de configuração do Jest (jest.config.js) na raiz do projeto e adicionando a seguinte linha:

module.exports = {
  preset: 'react'
}

Dessa forma, o Jest irá carregar automaticamente o React em todos os testes que você escrever.

Outra solução é utilizar o Babel para transpilar o código do React para que o Jest possa entendê-lo. Para isso, você pode adicionar o seguinte pacote ao seu projeto:

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react

E adicionar um arquivo de configuração do Babel (babel.config.js) na raiz do projeto com o seguinte conteúdo:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
}

Espero ter ajudado e bons estudos!