单元测试集成到Gitlab CI

[fayeah]

一、技术栈

   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

注：

1. stage名需为pages，否则无法生成page 链接。
2. 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