Jest Coverage shows me code coverage report already compiled - reactjs

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,
}
}