Jest: Some passing tests will fail when using --coverage flag

Created on 8 Dec 2016 · 3Comments · Source: facebook/jest

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Executing npm test has all tests passing; however, executing npm test -- --coverage causes some tests to fail.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal repository on GitHub that we can npm install and npm test.

I have a project containing a number of react components that I'm testing using jest and enzyme. I recently moved us up from [email protected] to [email protected] and [email protected] to [email protected]. I cleaned out the node_modules directory before installing the newer versions.

I run npm test and all of the tests pass. When I run npm test -- --coverage, some tests fail and the coverage report is generated.

It seems like all of the failures are around a component being shallow rendered with enzyme and then using find(selector) to find nodes in the render tree. The nodes are successfully found during jest, but fail for jest --coverage.

Before the upgrade, all tests passed for jest and jest --coverage.

Repo: https://github.com/nsand/jest-coverage

What is the expected behavior?

I would expect that all of the tests pass for both executions.

Run Jest again with --debug and provide the full configuration it prints. Please mention your node and npm version and operating system.

node @ v6.9.1
npm @3.10.8
OS macOS Sierra

jest version = 17.0.3
test framework = jasmine2
config = {
  "coverageDirectory": "/Users/dev/workspaces/component-project/.gh-pages/coverage",
  "moduleNameMapper": [
    [
      "^.+\\.(scss)$",
      "/Users/dev/workspaces/component-project/lib/styleMock.js"
    ]
  ],
  "rootDir": "/Users/dev/workspaces/component-project",
  "name": "-Users-dev-workspaces-component-project",
  "setupFiles": [
    "/Users/dev/workspaces/component-project/node_modules/babel-polyfill/lib/index.js"
  ],
  "testRunner": "/Users/dev/workspaces/component-project/node_modules/jest-jasmine2/build/index.js",
  "transform": [
    [
      "^.+\\.jsx?$",
      "/Users/dev/workspaces/component-project/node_modules/babel-jest/build/index.js"
    ]
  ],
  "usesBabelJest": true,
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/46/446113_55dgdfk3jsptqtd2c0000gn/T/jest",
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "jsx",
    "node"
  ],
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetMocks": false,
  "resetModules": false,
  "snapshotSerializers": [],
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "/Users/dev/workspaces/component-project"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.jsx?$",
  "testURL": "about:blank",
  "timers": "real",
  "transformIgnorePatterns": [
    "/node_modules/"
  ],
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "collectCoverage": true,
  "cache": false,
  "watchman": true
}

Confirmed

Source

nsand

Most helpful comment

Adding displayName to your components should fix it 😄

Istanbul wraps functions with other anonymous functions and we take the function name that node gives to the rendered component :( -- @cpojer https://github.com/facebook/jest/issues/1824#issuecomment-250376673

@nsand: For example, your Icon component will now look like this:

import React from 'react';

const Icon = ({ name }) => (
  <i className={`fa-icon fa-icon--${name}`}></i>
);

Icon.displayName = 'Icon';

export default Icon;

rogeliog on 9 Dec 2016

👍7 🎉1

All 3 comments

@dmitriiabramov any ideas on why is this happening?

thymikee on 8 Dec 2016

Adding displayName to your components should fix it 😄

Istanbul wraps functions with other anonymous functions and we take the function name that node gives to the rendered component :( -- @cpojer https://github.com/facebook/jest/issues/1824#issuecomment-250376673

@nsand: For example, your Icon component will now look like this:

import React from 'react';

const Icon = ({ name }) => (
  <i className={`fa-icon fa-icon--${name}`}></i>
);

Icon.displayName = 'Icon';

export default Icon;

rogeliog on 9 Dec 2016

👍7 🎉1

@rogeliog Amazing! Thank you. I was doing some debugging a bit ago and had noticed if I called children() on the wrapper, that there was a visible difference.

npm test

 [ { '$$typeof': Symbol(react.element),
           type: [Function: Icon],
           key: null,
           ref: null,
           props: [Object],
           _owner: null,
           _store: {} } ]

vs
npm test -- --coverage

[ { '$$typeof': Symbol(react.element),
           type: [Function],
           key: null,
           ref: null,
           props: [Object],
           _owner: null,
           _store: {} } ]

Where the difference is that Function is named for npm test. So this seems to go hand-in-hand with what you posted, and your proposal does indeed fix the problem. Thank you, @thymikee and @rogeliog!

nsand on 9 Dec 2016

Was this page helpful?

0 / 5 - 0 ratings