機能をリクエストしバグを報告しますか?
バグ
現在の動作は何ですか?
npm test
を実行すると、すべてのテストに合格します。 ただし、 npm test -- --coverage
を実行すると、一部のテストが失敗します。
現在の動作がバグである場合は、再現する手順と、可能であればGitHubにnpm install
とnpm test
最小限のリポジトリを提供してください。
ジェストと酵素を使用してテストしている多くの反応コンポーネントを含むプロジェクトがあります。 最近、 [email protected]
から[email protected]
、 [email protected]
から[email protected]
。 新しいバージョンをインストールする前に、 node_modules
ディレクトリをクリーンアップしました。
npm test
を実行すると、すべてのテストに合格します。 npm test -- --coverage
を実行すると、一部のテストが失敗し、カバレッジレポートが生成されます。
すべての失敗は、コンポーネントが酵素で浅くレンダリングされ、 find(selector)
を使用してレンダリングツリー内のノードを見つけることに関するもののようです。 ノードはjest
間に正常に検出されますが、 jest --coverage
では失敗します。
アップグレード前は、すべてのテストがjest
とjest --coverage
合格していました。
リポジトリ: https : //github.com/nsand/jest-coverage
期待される動作は何ですか?
両方の実行ですべてのテストに合格することを期待します。
--debug
を使用してJestを再度実行し、印刷する完全な構成を提供します。
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なぜこれが起こっているのかについてのアイデアはありますか?
コンポーネントにdisplayName
を追加すると、修正されるはずです😄
イスタンブールは関数を他の無名関数でラップし、ノードがレンダリングされたコンポーネントに付ける関数名を使用します: (- @ cpojer https://github.com/facebook/jest/issues/1824#issuecomment -250376673
@nsand :たとえば、 Icon
コンポーネントは次のようになります。
import React from 'react';
const Icon = ({ name }) => (
<i className={`fa-icon fa-icon--${name}`}></i>
);
Icon.displayName = 'Icon';
export default Icon;
@rogeliogすごい! ありがとうございました。 少し前にデバッグを行っていましたが、ラッパーでchildren()
を呼び出すと、目に見える違いがあることに気づきました。
npmテスト
[ { '$$typeof': Symbol(react.element),
type: [Function: Icon],
key: null,
ref: null,
props: [Object],
_owner: null,
_store: {} } ]
vs
npmテスト----カバレッジ
[ { '$$typeof': Symbol(react.element),
type: [Function],
key: null,
ref: null,
props: [Object],
_owner: null,
_store: {} } ]
違いは、関数の名前がnpm test
です。 したがって、これはあなたが投稿したものと密接に関連しているようであり、あなたの提案は確かに問題を解決します。 ありがとう、 @ thymikeeと@rogeliog!
最も参考になるコメント
コンポーネントに
displayName
を追加すると、修正されるはずです😄@nsand :たとえば、
Icon
コンポーネントは次のようになります。