Wrong code coverage in Jest after React-Native upgrade

Viewed 305

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.

0 Answers
Related