https://github.com/storybooks/storybook/tree/master/packages/storyshots ์์ ์ธ๋ถ ์ฌํญ์ ์ดํด๋ณด๊ณ ๋ฐ๋ผํ์ต๋๋ค.
์ธ๋ถ ๊ตฌ์ฑ์ด ๋ง์์ ๋ค์ง ์์ต๋๋ค.
`Jest ์ฉ ์ฑ ๊ตฌ์ฑ
์ผ๋ฐ์ ์ผ๋ก์ด ๋จ๊ณ๋ฅผ ์ด๋ฏธ ์๋ฃํ์ ์ ์์ต๋๋ค. ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์ฌ๊ธฐ์ ๋ช ๊ฐ์ง ๋ฆฌ์์ค๊ฐ ์์ต๋๋ค.
Create React App์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์ด๋ฏธ Jest ์ฉ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ํ์ฅ์๊ฐ .test.js ์ธ ํ์ผ ์ด๋ฆ์ ์์ฑํ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค.
๊ทธ๋ ์ง ์์ผ๋ฉด์ด Egghead ๋ ์จ์ ํ์ธํ์ญ์์ค.
์คํ ๋ฆฌ ์ท ๊ตฌ์ฑ
Storyshots.test.js๋ผ๋ ์ด๋ฆ์ผ๋ก ์ ํ ์คํธ ํ์ผ์ ๋ง๋ญ๋๋ค. (๋๋ ์ ํธํ๋ ์ด๋ฆ). ๊ทธ๋ฐ ๋ค์ ๋ค์ ๋ด์ฉ์ ์ถ๊ฐํ์ญ์์ค.
'storyshots'์์ initStoryshots ๊ฐ์ ธ ์ค๊ธฐ;
initStoryshots ();
๊ทธ๊ฒ ๋ค์ผ.
์ด์ Jest ํ ์คํธ ๋ช ๋ น์ ์คํํ์ญ์์ค. (๋ณดํต npm ํ ์คํธ) ๊ทธ๋ฌ๋ฉด ๋ชจ๋ ์คํ ๋ฆฌ๊ฐ Jest ์ค๋ ์ท ํ ์คํธ๋ก ๋ณํ๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค .`
์คํจ .Storyshots.test.js
โ ํ
์คํธ ๋ชจ์์ ์คํํ์ง ๋ชปํ์ต๋๋ค.
evalmachine.<anonymous>:1
(function (exports, require, module, __filename, __dirname) { import { configure } from '@kadira/storybook';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at runWithRequireContext (node_modules\storyshots\dist\require_context.js:103:37)
at testStorySnapshots (node_modules\storyshots\dist\index.js:72:35)
at Object.<anonymous> (Storyshots.test.js:2:52)
ํ
์คํธ ์ค์ํธ : ์คํจ 1 ๊ฐ, ํต๊ณผ 1 ๊ฐ, ์ด 2 ๊ฐ
ํ
์คํธ : ํต๊ณผ 1 ํ, ์ด 1 ํ
์ค๋
์ท : ์ด 0 ๊ฐ
์๊ฐ : 3.412 ์ด
๋ชจ๋ ํ
์คํธ ์ค์ํธ๋ฅผ ์คํํ์ต๋๋ค.
.storybook
ํด๋์ create-react-app
์ฌ์ฉํ๋ ๋์ผํ ์ฌ์ ์ค์ ์ผ๋ก .babelrc
ํ์ผ์ ๋ง๋ค์ด์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
{
"presets": ["es2015", "react"]
}
์ด๋ฐ ์ข ๋ฅ์ ๋ฐ๋ฒจ ์ค์ ์ด ๊ธฐ๋ณธ ์ค์ ์ด๋์ด์ผํฉ๋๊น? ๊ทธ๋ ์ง ์๋ค๋ฉด ๋ฐ๋์ ๋ฌธ์ํํด์ผํฉ๋๋ค.
ํธ์ง : ๋ซ๊ธฐ, # 880 ๋ณต์ .
๋๋ ์ ํํ์ด ๋ฌธ์ ์ ์ง๋ฉดํ๊ณ ์์ต๋๋ค. ๊ธฐ๋ก์ ์ํด ์ ๋ CRA๋ฅผ ์ฌ์ฉํ์ง ์์ต๋๋ค. ์ ์ ๋ ๊ทธ๋๋ก .babelrc
ํ์ผ์ .storybook
๋ง๋ค์์ต๋๋ค. ์ฐจ์ด๊ฐ ์์์ต๋๋ค. ํด๋น ํ์ผ์์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๊ธฐ ์ํด babel
์ (๋ฅผ) ์ป์ผ๋ ค๋ฉด ๋ค๋ฅธ ์์
์ด ํ์ํฉ๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ ์ ํํ์ด ๋ฌธ์ ์ ์ง๋ฉดํ๊ณ ์์ต๋๋ค. ๊ธฐ๋ก์ ์ํด ์ ๋ CRA๋ฅผ ์ฌ์ฉํ์ง ์์ต๋๋ค. ์ ์ ๋ ๊ทธ๋๋ก
.babelrc
ํ์ผ์.storybook
๋ง๋ค์์ต๋๋ค. ์ฐจ์ด๊ฐ ์์์ต๋๋ค. ํด๋น ํ์ผ์์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๊ธฐ ์ํดbabel
์ (๋ฅผ) ์ป์ผ๋ ค๋ฉด ๋ค๋ฅธ ์์ ์ด ํ์ํฉ๋๊น?