๊ธฐ๋ฅ ์ ์์ฒญํ๊ฑฐ๋ ๋ฒ๊ทธ๋ฅผ ๋ณด๊ณ ํ์๊ฒ ์ต๋๊น?
๋ฒ๋
ํ์ฌ ํ๋์ ๋ฌด์์ ๋๊น?
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: {} } ]
๋
npm ํ
์คํธ -- -- ์ ์ฉ ๋ฒ์
[ { '$$typeof': Symbol(react.element),
type: [Function],
key: null,
ref: null,
props: [Object],
_owner: null,
_store: {} } ]
์ฌ๊ธฐ์ ์ฐจ์ด์ ์ Function์ ์ด๋ฆ์ด npm test
์
๋๋ค. ๋ฐ๋ผ์ ์ด๊ฒ์ ๊ทํ๊ฐ ๊ฒ์ํ ๋ด์ฉ๊ณผ ๊ด๋ จ์ด ์๋ ๊ฒ์ผ๋ก ๋ณด์ด๋ฉฐ ๊ทํ์ ์ ์์ ์ค์ ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. @thymikee ์ @rogeliog ๊ฐ์ฌํฉ๋๋ค!
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ตฌ์ฑ ์์์
displayName
๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค ๐@nsand : ์๋ฅผ ๋ค์ด
Icon
๊ตฌ์ฑ ์์๋ ์ด์ ๋ค์๊ณผ ๊ฐ์ด ํ์๋ฉ๋๋ค.