README-ptbr.md

Create React App + React Testing Library + Cypress com Circle CI

Este é um repositório que demonstra a configuração mínima para ter uma aplicação instalada e com integração contínua usando o Circle CI, com teste unitário, integração e e2e.

Olá 👋, este repositório apresenta uma configuração mínima para ter uma aplicação React com o Circle CI.

Você pode ir em frente e clonar este repositório ou implementar facilmente em seu próprio código com 3 commits:

1. Adicione React Testing Library

RTL é uma das minhas bibliotecas favoritas, faz escrever testes tão natural quanto escrever código. yarn add @testing-library/react @testing-library/jest-dom -D

Crie um arquivo chamado setupTests.js assim: ./src/setupTests.js:

// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'

Vá em frente e escreva seu primeiro teste: ./src/app.spec.js

import React from 'react'
import { render } from '@testing-library/react'
import App from './App'

describe('App', () => {
  it('renders content', () => {
    const { getByText } = render(<App />)
    const content = getByText('Hello world')
    expect(content).toBeInTheDocument()
  })
})

Fizemos o mínimo com React Testing Library, veja mais exemplos aqui:

• Se você quiser ver mais exemplos para iniciantes: link
• Casos mais específicos, como react-redux: link

2. Adicione Cypress

Primeiro adicione Cypress ao seu projeto: yarn add cypress -D

Agora crie a estrutura inicial da pasta cypress: Crie uma pasta chamada cypress e, dentro dela, outra chamada integration.

Em seguida, crie seu primeiro teste e2e: ./cypress/integration/app.spec.js

describe('App', () => {
  it('check if app is rendering a welcome message', () => {
    cy.visit('http://localhost:3000')

    cy.get('.App').contains('Hello world')
  })
})

Este é um exemplo muito simples do que você pode criar com o Cypress, eu sei que provavelmente não fez seus olho brilharem, mas as coisas podem ficar realmente empolgantes com esses plugins que você pode adicionar aos seus scripts:

• 📷Teste de Regressão Visual: https://github.com/palmerhq/cypress-image-snapshot
• ♿Melhore a acessibilidade do seu código: https://github.com/avanslaars/cypress-axe
• 🤯Escreva testes unitários com Cypress: https://github.com/bahmutov/cypress-react-unit-test
• E muito mais

3. Adicione Circle CI

Crie uma pasta como: ./.circleci e um arquivo chamado ./.circleci/config.yml

O conteúdo de config.yml deve ser:

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
  react: thefrontside/react@0.1.0
workflows:
  push:
    jobs:
      - react/install
      - react/test:
          requires:
            - react/install
  build:
    jobs:
      - cypress/run:
          yarn: true
          start: yarn start
          wait-on: 'http://localhost:3000'
          no-workspace: true

Isso é tudo sobre a parte do código, agora siga o tutorial do Circle CI para criar uma conta e adicionar seu projeto: link

4. (Optional) Adicione uma 'Badge'

Quer mostrar a todos que você fez isso? Veja aqui como adicionar uma badge do Circle CI para seu repositório.

É isso

É isso, se você tiver alguma sugestão para melhorar este exemplo, sinta-se à vontade para abrir uma issue ou falar comigo.

Espero que ajude. Happy testing! 👋