How to run React Jest e2e tests in GitLab CI-CD pipeline?

Question

Scenario:

I have configured e2e tests using Jest for a React web app. To run e2e tests locally, I had to start the server locally from a terminal window using npm start command and from another terminal window, execute the test command npm run test:e2e. I have both Chrome and Firefox browsers installed in my pc as a result e2e tests are running properly in local.

Now, I want to run these e2e tests as part of GitLab CI-CD pipeline and having issue with the following:

How to ensure that browsers (Chrome/Firefox) are available to the GitLab runner? I got some tutorials which suggested to install required browser(s) as part of the pipeline step. Is it the best approach?
Is it possible to achieve the same without installing the browser(s)? For example: using selenium_standalone-chrome images? If yes, how to do it?

Any reference to example link/code is highly appreciated. Thanks.

I think you will need a headless browser. Those browsers don't render their ui, so you can run it in terminal. I use a headless chrome for my azure pipeline — Dennis Rieke, Mar 13 '20 at 05:52
@DennisRieke Thanks for your comment, but I think even to run the browsers in headless mode, you need the browsers to be installed on the test machine. Please correct me if I am wrong. For now, I am using below in my GitLab CI-CD pipeline which I posted as an answer for future: — vpv, Mar 17 '20 at 20:31

score 1 · Answer 1 · answered Mar 17 '20 at 20:35

In GitLab CI-CD pipeline (for Chrome browser only at the moment):

E2Etest:
  stage: e2e
  image: node:10.15.3
  variables:
    CI_DEBUG_TRACE: "true"
  allow_failure: false
  script:
    - set -e
    - npm install


    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    - sh -c 'echo deb http://dl.google.com/linux/chrome/deb/ stable main > /etc/apt/sources.list.d/google.list'
    - apt-get update
    - apt-get install -y xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic xvfb x11-apps imagemagick google-chrome-stable


    - npm run test:e2e:chrome
    - pkill node
  artifacts:
    paths:
      - coverage
    expire_in: 1 hr

How to run React Jest e2e tests in GitLab CI-CD pipeline?

1 Answers1