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

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;

All 3 comments

@dmitriiabramov any ideas on why is this happening?

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 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!

Was this page helpful?
0 / 5 - 0 ratings