/front-end-unit-tests

Getting started with unit tests using Jest and React Testing Library

Primary LanguageJavaScriptMIT LicenseMIT

Frontend Unit Tests - Getting Started With React Testing Library

Português | English

Laboratório do curso grátis Introdução à Testes no Front-end.
Esse projeto foi desenvolvido com Create React App.

Primeiros Passos

git clone <repository-url>

Para clonar esse repositório no seu computador.

npm install

Para instalar as dependências necessárias para rodar o projeto.

Branches

  • main: Possui todos os arquivos do projeto, com exceção dos arquivos de testes.
  • unit-tests: Possui todos os arquivos do projeto + arquivos de testes.
  • manual-setup: Possui as configurações do jest para projetos React que NÃO foram criados pelo template CRA. Ao dar checkout nessa branch você precisa rodar o comando npm run reinstall, isso irá deletar a pasta node_modules e reinstalar as dependências.
    PS: Você vai precisar rodar o npm run reinstall sempre que entrar e sair da branch manual-setup.
  • Caso queira praticar o que vimos na aula, você pode criar uma branch apartir da branch main com o comando git checkout -b meu-nome/unit-tests.
    Prontinho, agora é só começar a desenvolver seus testes!

Scripts Disponíveis

npm start

Roda a aplicação no modo de desenvolvimento.
Abre o http://localhost:3000 para visualização no browser.

A página irá recarregar a cada alteração no código.
Você também poderá ver os erros no console.

npm run test

Roda o test runner no modo interativo de observação.
Veja a sessão sobre running tests para mais informações.

npm run test:coverage

Roda a cobertura de testes, criando um relatório na pasta coverage.

npm run lint

Checa se o padrão de formatação do código está correto.

npm run fix

Formata o código para seguir o padrão de formatação configurado no arquivo .prettierrc.json

Bibliotecas e Frameworks

  • React
  • Jest
  • @testing-library/react
  • @testing-library/jest-dom
  • @testing-library/user-event
  • styled-components
Desenvolvido com muito amor por Aline "Nyh" Vignoli

Português | English

Lab developed for Getting Started With Front-end Unit Tests course.
This project was bootstrapped with Create React App.

Getting Started

git clone <repository-url>

To clone this repository in your computer.

npm install

To install all the necessary dependencies to run the project.

Branches

  • main: It contains all the project files, excluding the test files.
  • unit-tests: It contains all the project files + test files.
  • manual-setup: It contains jest settings for React projects which were NOT created using CRA template. When you do the checkout on this branch, you will need to run npm run reinstall, this will remove the node_modules folder and reinstall the dependencies.
    PS: You will need to run npm run reinstall everytime you switch between manual-setup and other branches.
  • If you want to practice what you've learned in the lesson, you may create a branch based on the main branch by runing git checkout -b my-name/unit-tests.
    That's it! You're all set to begin the development of your unit tests!

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run test:coverage

Runs the test coverage, creating a report file inside of coverage folder.

npm run lint

Verifies if the code formatting pattern is correct.

npm run fix

Format the code accordingly with the formatting settings on the .prettierrc.json file

Libs and Frameworks

  • React
  • Jest
  • @testing-library/react
  • @testing-library/jest-dom
  • @testing-library/user-event
  • styled-components
Developed with love by Aline "Nyh" Vignoli