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

This is a repo that demonstrates the minimal setup to have a up and running application with continuous integration using Circle CI with unit, integration and e2e tests.

🇧🇷 Portuguese version

Hey there 👋, this is a minimal setup for having a React app with Circle CI.

You can go ahead and clone this repository or you can easily implement on your own code with 3 commits:

1. Add React Testing Library

RTL is one of my favorite libraries, it makes writing tests as natural as writing code. yarn add @testing-library/react @testing-library/jest-dom -D

Create a file called ./src/setupTests.js:

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

Go ahead and write your first test: ./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()
  })
})

That's it for React Testing Library, check more examples here:

• If you want to see more beginner examples: link
• More specific cases like react-redux: link

2. Add Cypress

First add Cypress to your project: yarn add cypress -D

Now create the initial cypress folder structure: Create a folder called cypress and another one called integration inside of it.

Then, create your fist e2e test: ./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')
  })
})

This is a very simple example of what you can build with Cypress, I know it probably didnt sound that awesome but things can really exciting with this features that you can add to your scripts:

• 📷Visual Regression Tests: https://github.com/palmerhq/cypress-image-snapshot
• ♿Improve your app accessibility with: https://github.com/avanslaars/cypress-axe
• 🤯Take Cypress to unit testing: https://github.com/bahmutov/cypress-react-unit-test
• And much more

3. Add Circle CI

Create a folder like: ./.circleci and a file called ./.circleci/config.yml

The content of config.yml should be:

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

That's all about the code part, now follow Circle CI tutorial to create an account and add your project: link

4. (Optional) Add a Badge

Want to show everyone else that you did it? Check here how to add a Circle CI badge to your repo.

That's it

That's it, if you have any suggestion to improve this example, feel free to open an issue or dm me.

Hope it helps. Happy testing! 👋