Como criar pipelines poderosos para React Native no Gitlab

Gitlab Pipeline

O Gitlab fornece ferramentas de DevOps, sendo o Gitlab Pipeline uma delas. Esta ferramenta permite "construir uma esteira de automação para integração contínua" que oferece feedback rápido sobre commits, branches ou merge requests. As tarefas são declaradas em um arquivo YML com suas dependências necessárias, como imagens Docker específicas.

Criação do pipeline de testes

Diagrama do pipeline GitLab CI/CD

É necessário possuir uma aplicação com testes já integrados antes de começar. O arquivo .gitlab-ci.yml deve ser criado na pasta principal. Um exemplo básico utiliza Node.js como base:

image: node:16.10.0

cache:
  paths:
    - node_modules/

test_async:
  script:
    - npm install
    - node ./specs/start.js ./specs/async.spec.js

Para usar Yarn como gerenciador de dependência, adicione as instruções de instalação através de before_script:

image: node:16.10.0

before_script:
  - curl -o- -L https://yarnpkg.com/install.sh | bash
  - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

cache:
  paths:
    - node_modules/

test_async:
  script:
    - yarn install
    - yarn test

Melhorando o Pipeline

Screenshot do GitLab CI/CD

Dividir em estágios

Organize tarefas através da chave stages:

stages:
  - build-deps
  - test

build-deps:
  stage: build-deps
  script:
    - yarn install

run_tests:
  stage: test
  script:
    - yarn test

Otimizar tempo de execução

Implemente variáveis para cache mais rápido:

variables:
  FF_USE_FASTZIP: "true"
  ARTIFACT_COMPRESSION_LEVEL: "fast"
  CACHE_COMPRESSION_LEVEL: "fast"

cache:
  - key:
      files:
        - yarn.lock
    paths:
      - node_modules/
    policy: pull-push

Extrair cobertura de testes

Use Regex para capturar a cobertura:

run_tests:
  stage: test
  coverage: '/All\\sfiles\[\\s\]\*\\|\[\\s\]\*(\\d+\\.\\d+)/'
  script:
    - yarn test:ci

Configurar timezone

No package.json, use cross-env para garantir compatibilidade:

{
  "scripts": {
    "test": "cross-env TZ=America/Sao_Paulo jest",
    "test:coverage": "cross-env TZ=America/Sao_Paulo jest --coverage --watchAll=false"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

Configuração do pipeline

Adicionar relatórios JUnit

Instale jest-junit:

yarn add jest-junit --dev

Configure no package.json:

{
  "scripts": {
    "test:ci": "cross-env TZ=America/Sao_Paulo jest --coverage --watchAll=false --reporters=default --reporters=jest-junit --silent"
  }
}

E no pipeline:

run_tests:
  stage: test
  coverage: '/All\\sfiles\[\\s\]\*\\|\[\\s\]\*(\\d+\\.\\d+)/'
  artifacts:
    when: always
    reports:
      junit:
        - junit.xml
  script:
    - yarn test:ci

Estágio do pipeline

Arquivo final completo

image: node:16.10.0

variables:
  FF_USE_FASTZIP: "true"
  ARTIFACT_COMPRESSION_LEVEL: "fast"
  CACHE_COMPRESSION_LEVEL: "fast"

cache:
  - key:
      files:
        - yarn.lock
    paths:
      - node_modules/
    policy: pull-push
  - key: yarn-$CI_JOB_IMAGE
    paths:
      - .yarn
    policy: pull-push

before_script:
  - curl -o- -L https://yarnpkg.com/install.sh | bash
  - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

stages:
  - build-deps
  - test

build-deps:
  stage: build-deps
  script:
    - yarn install --cache-folder .yarn

run_tests:
  stage: test
  coverage: '/All\\sfiles\[\\s\]\*\\|\[\\s\]\*(\\d+\\.\\d+)/'
  artifacts:
    when: always
    reports:
      junit:
        - junit.xml
  script:
    - yarn test:ci

Resultado do pipeline

Definir timeout

Configure tempo de expiração em CI/CD Settings >> General pipelines >> Timeout para evitar custos inesperados. O exemplo utiliza 20 minutos.

Conclusão

O artigo demonstra como utilizar o Gitlab Pipeline para testar aplicações React Native com otimizações de tempo e garantia de qualidade antes de aprovar merge requests.