Why Jest coverage creates an .html file from every component? - react-native

Question

I'm testing a React Native app.
I run jest --coverage and I get 233 files:
I still get the coverage file and I can see the coverage through index.html.
But why the other files.
Here is the package.json
{
"name": "entoutonika",
"version": "0.0.1",
"private": true,
"scripts": {
"8": "react-native run-ios --simulator=\"iPhone 8 Plus\" ",
"11": "react-native run-ios --simulator=\"iPhone 11 Pro Max\" ",
"ios": "react-native run-ios",
"and": "react-native run-android",
"se": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\" ",
"ipad13": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (5th generation)\" ",
"air": "react-native run-ios --simulator=\"iPad Air (4th generation)\" ",
"start": "react-native start",
"test": "jest --runInBand --detectOpenHandles --forceExit",
"watch": "jest --watch",
"cov": "jest --coverage",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "npx tsc",
"checkformat": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
"prepare": "npm run typecheck && lint-staged && husky install",
"postinstall": "npx typesync"
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/netinfo": "^7.1.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/elements": "^1.2.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"firebase": "^9.4.1",
"formik": "^2.2.9",
"lottie-react-native": "^4.1.3",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-bootsplash": "^4.0.2",
"react-native-code-push": "^7.0.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.3.0",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"typescript": "^4.4.4",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-typescript": "^7.16.7",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#testing-library/jest-native": "^4.0.4",
"#testing-library/react": "^12.1.2",
"#testing-library/react-native": "^9.0.0",
"#types/babel__core": "^7.1.16",
"#types/eslint": "^7.28.2",
"#types/jest": "^26.0.24",
"#types/mocha": "^9.0.0",
"#types/react": "17.0.2",
"#types/react-native": "^0.65.0",
"#types/react-native-vector-icons": "^6.4.9",
"#types/react-redux": "^7.1.20",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.1.0",
"#typescript-eslint/parser": "^5.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-testing-library": "^5.0.5",
"husky": "^7.0.0",
"jest": "^26.6.3",
"jest-fetch-mock": "^3.0.3",
"lint-staged": ">=10",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^17.0.2",
"redux-devtools-extension": "^2.13.9"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"verbose": true,
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFilesAfterEnv": [
"#testing-library/jest-native/extend-expect"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"moduleDirectories": [
"node_modules",
"src"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
"setupFiles": [
"./setupJest.js"
]
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{js,jsx,ts,tsx, json}": "prettier --write"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
What I do now is check the coverage, and then delete all the files.
I don't have this issue with React projects.
Is there something wrong with the configuration?

Answer 1

Those files are expected since are part of the repo itself so you can see lines of code covered by your tests etc.
You need to add the folder where those are generated into your .gitignore since the whole coverage shouldn't be tracked in your repo.