Jest: --coverage ํ”Œ๋ž˜๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ผ๋ถ€ ํ†ต๊ณผ ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 12์›” 08์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/jest

๊ธฐ๋Šฅ ์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ๋ฅผ ๋ณด๊ณ  ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๋ฒŒ๋ ˆ

ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

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
}
Confirmed

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๊ตฌ์„ฑ ์š”์†Œ์— 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;

๋ชจ๋“  3 ๋Œ“๊ธ€

@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: {} } ]

๋Œ€
npm ํ…Œ์ŠคํŠธ -- -- ์ ์šฉ ๋ฒ”์œ„

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

์—ฌ๊ธฐ์„œ ์ฐจ์ด์ ์€ Function์˜ ์ด๋ฆ„์ด npm test ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๊ฒƒ์€ ๊ท€ํ•˜๊ฐ€ ๊ฒŒ์‹œํ•œ ๋‚ด์šฉ๊ณผ ๊ด€๋ จ์ด ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด๋ฉฐ ๊ท€ํ•˜์˜ ์ œ์•ˆ์€ ์‹ค์ œ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค. @thymikee ์™€ @rogeliog ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰