单元测试集成到Gitlab CI

一、技术栈

   vue3 + jest

二、结果

代码库的badge

测试报告

每个job都生成相应的数据，也可以下载报告

三、文件配置

.gitlab-ci.yml

stages:
  - pages


pages:
  stage: pages
  script:
    - npm install
    - npm run test
    - mkdir .public
    - cp -r coverage/* .public
    - rm -rf public
    - mv .public public
  artifacts:
    paths:
      - public
    when: always
    reports:
      junit:
        - junit.xml
      cobertura: coverage/cobertura-coverage.xml
  tags:
    - some-runner

注：

stage名需为pages，否则无法生成page 链接。
npm run test的脚本为: "test": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false"

jest配置文件：

module.exports = {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue',
    'tsx'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx$': 'vue-jest',
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  },
  modulePaths: ["src"],
  moduleDirectories: ["node_modules"],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  collectCoverageFrom: [
    "src/**/*.{js,ts,tsx}",
    "!<rootDir>/node_modules/"
  ],
  coverageReporters: ["html", "text", "text-summary", "cobertura"],
}

四、Gitlab设置

测试报告的正则解析

badge配置：可以自己定义，例如%{default_branch} 可以改为名为"test"的分支名称，那么指定读取该分支下生成的报告或其他状态。测试覆盖率badge

pipeline状态badge