I just upgrade my project from react 0.53.3 to 0.57.3. After the upgrade, my jest tests no longer passed because my coverage thresholds were no longer achieved. It's definitely a configuration error on my part, but I just can't figure out what I have to tweak in order to fix the issue. For this issue I am presenting the simplest file I can to expose the problem. The problem happens across my entire project but I can't really share the whole thing.
Any help is greatly appreciated. Thank you!
Dependencies for example
{
"dependencies": {
"prop-types": "15.6.2",
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.3"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"babel-polyfill": "6.26.0",
"babel-preset-react-native": "^4.0.1",
"eslint": "5.7.0",
"jest": "23.6.0",
"jest-cli": "23.6.0",
"metro-react-native-babel-preset": "0.48.1",
"react-test-renderer": "16.6.0-alpha.8af6728"
}
}
Jest Config
{
"jest": {
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"coverageDirectory": "./coverage/jest",
"collectCoverage": true,
"collectCoverageFrom": [
"src/components/**/*.js",
"src/lib/components/**/*.js",
],
"coverageThreshold": {
"global": {
"statements": 90,
"branches": 90,
"functions": 90,
"lines": 90
}
},
"preset": "react-native"
}
}
Test file
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import H1 from '../../../../src/lib/components/H1';
describe('H1', () => {
it('should render correctly', () => {
const tree = renderer.create(<H1>Title</H1>).toJSON();
expect(tree).toMatchSnapshot();
});
});
File tested
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Text from '../../containers/TextContainer.js';
import { TEXT_LIGHT } from '../colors';
export default class H1 extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
color: PropTypes.string,
}
static defaultProps = {
color: TEXT_LIGHT,
}
render() {
return (
<Text
color={this.props.color}
fontSizeRatio={3.4}
>
{this.props.children}
</Text>
);
}
}
Coverage results for file
- Statements: 83.87%
- Branches: 60.78%
- Functions: 86.67%
- Lines: 100%
- Uncovered lines: 24 (import { TEXT_LIGHT } from '../colors';)
Expected behavior
My code coverage, on most files should be 100% in all categories.