CircleCI setup with Cypress and React-testing-library

Question

I would like to use CircleCi to run my Cypress and react-testing-library tests because I want to test my react app. On local env I would run (which work fine):

• yarn run test to execute my react-testing-library tests
• yarn cypress run to execute Cypress test

Now, I have found resources on how to make circleci config.yaml however nothing have worked. For reference link1, link2, link3, link4, link5

Some of the tests failed due to: error [email protected]: The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "10.24.1" or wrong cashing or something else. After 20 runs I am clueless, can someone help me, please?

As I was browsing resources I thought this should work for Cypress tests but it did not.

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
workflows:
  build: 
    jobs:
      - cypress/install:
          build: yarn run build # run a custom app build step
          yarn: true
      - cypress/run:
          requires:
            - cypress/install
          parallel: true # split all specs across machines
          parallelism: 4 # use 4 CircleCI machines to finish quickly
          yarn: true
          group: 'all tests' # name this group "all tests" on the dashboard
          start: yarn start # start server before running tests

Answer 1

For those who will search this issue later. I overcome errors:

• error [email protected]: The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "10.24.1" by not using orb and instead use workflow -> jobs -> steps
• fsevents not accessible from jest-haste-map by using yarn instead of npm
• Lastly, some of your errors may come from your app (at least in my case react app) taking configuration from .env file that is not uploaded to github and therefore is not checkout to CircleCI docker and therefore during the test of the app will not work.

The working solution that I am using is:

version: 2.1
jobs:
  run_tests:
    docker:
      - image: cypress/base:12
        environment:
          # this enables colors in the output
          TERM: xterm
    working_directory: ~/portalo
    steps:
      - checkout
      - run:
          name: Install project dependencies
          command: yarn install --frozen-lockfile
      - run: 
          name: Compile and start development server on port 3000
          command: yarn startOnPort3000Linux
          background: true
      - run: 
          name: Wait for development server to start
          command: 'yarn wait-on http://localhost:3000'
      - run: 
          name: Run routing tests with react-testing-library via yarn test
          command: 'yarn test ~/portalo/src/tests/react-testing-library/routing.test.tsx'
      - run: 
          name: Run e2e tests with Cypruss via cypress run
          command: $(yarn bin)/cypress run

workflows:
  version: 2.1
  build_and_test:
    jobs:
      - run_tests

Note: wait-on had to be added. In my case by yarn add wait-on

Note2: All steps have to be in a single to have present all installed packages. It could be tweet by using save/restore cache.