Detailed explanation of examples of using Jest configuration to generate test reports in Vue3 project

1. Introduction

Using Jest for unit testing in Vue 3 projects is a common practice and it can help us verify the correctness and stability of our code. Generating test reports can help us better understand test coverage and test results so that we can better optimize and improve our code. This article will explain how to configure Jest in a Vue 3 project to generate a test report.

2. Install Jest

First, we need to install Jest in the Vue 3 project. You can use the following command to install:

npm install --save-dev jest

3. Configure Jest

Create a Vue 3 project root directoryFile and add the following:

 = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
     '!src/', // Exclude entry files
     '!src/router/', // Exclude routing files
     '!**/node_modules/**' // Exclude node_modules directory  ],
  coverageReporters: ['lcov', 'text-summary'],
  coverageDirectory: 'coverage',
  reporters: [
    'default',
    [
      'jest-junit',
      {
        outputDirectory: 'test-results',
        outputName: ''
      }
    ]
  ]
};

In the above configuration,presetSpecifies the Jest preset configuration using Vue CLI.collectCoverageSet astrueIndicates the collection of test coverage information,collectCoverageFromSpecifies the file to collect coverage information.coverageReportersSpecifies the format of the generated coverage report,coverageDirectorySpecifies the directory for the generated coverage report.

reportersConfiguration items are used to specify the format and directory of the generated test report. In the above configuration, we useddefaultThe reporter generates the report output by the console, and usesjest-junitReporter to generate an XML report in JUnit format, which needs to be installedjest-junitBag.

You can use the following command to install:

npm install --save-dev jest-junit

4. Run the test

Now, we have completed the configuration of Jest. Next, we can run the test and generate the test report.

existTo the file, add the following script command:

{
  "scripts": {
    "test": "jest --ci --reporters=default --reporters=jest-junit"
  }
}

In the above command,--ciParameters are used to run tests in CI/CD environments.--reporters=default --reporters=jest-junitParameters are used to specify the use of the default reporter andjest-junitReporter.

Now we can run the following command to run the test and generate the test report:

npm run test

After the run is completed, you will be in the project root directorycoverageThe generated test report is found in the directory.

5. Conclusion

By configuring Jest and generating test reports, we can better understand the test coverage and test results of our code. This helps us discover and fix problems in our code and improve the quality and stability of our code. Hope this article will be helpful for you to generate test reports using Jest configuration in your Vue 3 project.

This is the end of this article about the detailed explanation of the example of using Jest configuration to generate test reports in Vue3 project. For more related content of Vue3 Jest test reports, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!