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
}
@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!
Most helpful comment
Adding
displayName
to your components should fix it 馃槃@nsand: For example, your
Icon
component will now look like this: