1
resposta

[Dúvida] Meu App.test.js esta dando erro

Referente ao curso React: comece seu projeto full stack

por Gabriel Galvão Dos Anjos
| 21.8k xp | 2 posts

o meu código import { render, screen } from '@testing-library/react'; import App from './App';

test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); o erro que aparece Jest (ebook)

[info] auto config:

found: rootPath: /Users/gabrielgalvaodosanjos/ebook jestCommandLine: npm test --

ebook@0.1.0 test /Users/gabrielgalvaodosanjos/ebook react-scripts test "--testLocationInResults" "--json" "--useStderr" "--outputFile" "/var/folders/z6/91qd74f96dj3p_2gf5yc64gm0000gn/T/jest_runner_ebook_501.json" "--watch" "--no-coverage" "--reporters" "default" "--reporters" "/Users/gabrielgalvaodosanjos/.vscode/extensions/orta.vscode-jest-5.2.3/out/reporter.js" "--colors"

Test run started at 02/04/2023 11:46:29 <

console.error Warning: Each child in a list should have a unique "key" prop.

Check the render method of `OpcoesHeader`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at OpcoesHeader
    at header
    at Header
    at div
    at App

  4 | function OpcoesHeader(){
  5 |     return(
> 6 |         <ul className='opcoes'>
    |         ^
  7 |         { textoOpcoes.map( (texto) => (
  8 |          <li className='opcao'><p>{texto}</p></li>
  9 |         ) ) }

  at printWarning (node_modules/react/cjs/react-jsx-dev-runtime.development.js:87:30)
  at error (node_modules/react/cjs/react-jsx-dev-runtime.development.js:61:7)
  at validateExplicitKey (node_modules/react/cjs/react-jsx-dev-runtime.development.js:1078:5)
  at validateChildKeys (node_modules/react/cjs/react-jsx-dev-runtime.development.js:1105:11)
  at jsxWithValidation (node_modules/react/cjs/react-jsx-dev-runtime.development.js:1276:11)
  at OpcoesHeader (src/componentes/OpcoesHeader/index.js:6:9)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)

console.error Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at iconesHeader at header at Header at div at App

  at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
  at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
  at createElement (node_modules/react-dom/cjs/react-dom.development.js:9761:9)
  at createInstance (node_modules/react-dom/cjs/react-dom.development.js:10941:20)
  at completeWork (node_modules/react-dom/cjs/react-dom.development.js:22187:28)
  at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26593:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26568:5)

console.error Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at iconesHeader at header at Header at div at App

  at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
  at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
  at createElement (node_modules/react-dom/cjs/react-dom.development.js:9816:9)
  at createInstance (node_modules/react-dom/cjs/react-dom.development.js:10941:20)
  at completeWork (node_modules/react-dom/cjs/react-dom.development.js:22187:28)
  at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26593:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26568:5)

FAIL src/App.test.js (6.343 s) ✕ renders learn react link (1009 ms)

1 resposta
por Lorena Garcia
| 11909.9k xp | 17866 posts
Alura Scuba Team

Oi Gabriel, tudo bem?

Desculpe a demora em retornar.

O erro que está ocorrendo no seu código é um aviso do React informando que cada filho em uma lista deve ter uma propriedade única "key". Isso ocorre porque o React usa a propriedade "key" para identificar qual elemento está sendo atualizado, adicionado ou removido em uma lista.

No seu código, o aviso está sendo gerado na função "OpcoesHeader", na linha 6, onde você está criando uma lista de opções usando um mapeamento do array "textoOpcoes". Para corrigir esse erro, você precisa adicionar a propriedade "key" a cada elemento da lista. Você pode usar o índice do elemento como valor da propriedade "key", por exemplo:

function OpcoesHeader(){
  return(
    <ul className='opcoes'>
      { textoOpcoes.map( (texto, index) => (
        <li key={index} className='opcao'><p>{texto}</p></li>
      ) ) }
    </ul>
  );
}

Além disso, o React também está gerando alguns avisos informando que alguns nomes de componentes não estão seguindo as convenções de nomenclatura do React. Isso significa que você deve renomear esses componentes para que eles comecem com uma letra maiúscula.

Para corrigir esses erros, você pode renomear os componentes para seguir a convenção de nomenclatura do React. Por exemplo, na função "Header", os componentes "iconesHeader" e "opcoesHeader" devem ser renomeados para "IconesHeader" e "OpcoesHeader", respectivamente.

Espero que essas dicas tenham ajudado a resolver seu problema.

Um abraço e bons estudos.