Jest Coverage shows me code coverage report already compiled

Question

I'm using React and when I run the unit tests with "jest --coverage", the coverage report shows me the already compiled code (attached image).

It should show me in the report the component as I wrote it (I attach the code of my component).

Here the versions of the dependencies:

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"

This is my code.

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>
  );
}

This is my 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/$1',
    '@Pages/(.*)': '<rootDir>/pages/$1',
    '@Icons/(.*)': '<rootDir>/src/Icons/$1',
  }
};

This is Result Report of Jest. Image Report

Thanks in advance.

Answer 1

I found the solution, it was just in the file jest.tsconfig.json change the field "sourceMap" to true:

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