Jest Coverage 向我显示已编译的代码覆盖率报告

Question

我正在使用 React，当我运行使用“jest --coverage”进行单元测试时，覆盖率报告显示已编译的代码（附图）。

它应该在报告中显示我编写的组件（我附上了我的组件代码）。

这里是依赖的版本：

react: "17.0.2",
react-dom: "17.0.2",
@babel/preset-env: "^7.16.11",
@babel/preset-react: "^7.16.7",
@types/jest: "^27.4.1",
babel-jest: "^27.5.1",
babel-preset-env: "^1.7.0",
jest: "^27.5.1",
jest-canvas-mock: "^2.3.1",
jest-junit: "^13.0.0",
jest-next-dynamic: "^1.0.1",
ts-jest: "^27.1.3"

这是我的代码。

import React from 'react';
import Logo from '@Icons/Logo.svg';

import styles from '@Pages/Modules/Public/index.module.scss';

export default function SecondPage() {
  return (
    <div className={`${styles.p_landing_info}`}>

      <div className={`${styles.p_landing_info__body} e-container`}>
        <div className={styles.p_landing_info__observation_footer}>
          <p className='e-p3 e-text-medium'>
            A tu lado todo el camino
          </p>
          <Logo className={styles.p_landing_info__footer_logo} />
        </div>
      </div>
    </div>
  );
}

这是我的jest.config.js

module.exports = {
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js'
  ],
  transform: {
    '^.+\.tsx?$': 'ts-jest'
  },
  testMatch: [
    '**/*.(test|spec).(ts|tsx)'
  ],
  testEnvironment: 'jsdom',
  globals: {
    'ts-jest': {
      babelConfig: true,
      tsconfig: 'jest.tsconfig.json'
    }
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    'pages/**/*.{js,jsx,ts,tsx}',
    '!pages/**/_*.{js,jsx,ts,tsx}',
  ],
  coveragePathIgnorePatterns: [
    '/node_modules/',
    'enzyme.js',
  ],
  setupFilesAfterEnv: ['<rootDir>/enzyme.js', 'jest-canvas-mock', '<rootDir>/jest.env.ts'],
  coverageReporters: [
    'json',
    'lcov',
    'text',
    'text-summary'
  ],
  reporters: [
    'default',
    ['jest-junit', {
      'suiteName': 'jest tests',
      'outputDirectory': 'coverage',
      'outputName': 'junit.xml',
      'classNameTemplate': '{classname} - {title}',
      'titleTemplate': '{classname} - {title}',
      'ancestorSeparator': ' > ',
      'usePathForSuiteName': 'true'
    }]
  ],
  testResultsProcessor: 'jest-junit',
  moduleNameMapper: {
    '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
    '\.(css|less|scss)$': 'identity-obj-proxy',
    '@Src/(.*)': '<rootDir>/src/',
    '@Pages/(.*)': '<rootDir>/pages/',
    '@Icons/(.*)': '<rootDir>/src/Icons/',
  }
};

这是Jest的结果报告。 Image Report

提前致谢。

Answer 1

我找到了解决方案，只是在文件 jest.tsconfig.json 中将字段“sourceMap”更改为真:

{
  "compilerOptions": {
    {...},
    "sourceMap": true,
  }
}

Jest Coverage 向我显示已编译的代码覆盖率报告

Jest Coverage shows me code coverage report already compiled

unit-testing

code-coverage

typescript

reactjs

ts-jest