Storybook: Storyshots Jest ์˜ˆ์ œ ๊ตฌ์„ฑ์—์„œ ๊ฐ€์ ธ ์˜ค๊ธฐ์‹œ ์˜ค๋ฅ˜ ๋ฐœ์ƒ

์— ๋งŒ๋“  2017๋…„ 04์›” 17์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: storybookjs/storybook

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 ์ดˆ
๋ชจ๋“  ํ…Œ์ŠคํŠธ ์Šค์œ„ํŠธ๋ฅผ ์‹คํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

needs reproduction question / support

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

๋‚˜๋Š” ์ •ํ™•ํžˆ์ด ๋ฌธ์ œ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ก์„ ์œ„ํ•ด ์ €๋Š” CRA๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ œ์•ˆ ๋œ ๊ทธ๋Œ€๋กœ .babelrc ํŒŒ์ผ์„ .storybook ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ฐจ์ด๊ฐ€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ํŒŒ์ผ์—์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ด๊ธฐ ์œ„ํ•ด babel ์„ (๋ฅผ) ์–ป์œผ๋ ค๋ฉด ๋‹ค๋ฅธ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ?

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

.storybook ํด๋”์— create-react-app ์‚ฌ์šฉํ•˜๋Š” ๋™์ผํ•œ ์‚ฌ์ „ ์„ค์ •์œผ๋กœ .babelrc ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

{
  "presets": ["es2015", "react"]
}

์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๋ฐ”๋ฒจ ์„ค์ •์ด ๊ธฐ๋ณธ ์„ค์ •์ด๋˜์–ด์•ผํ•ฉ๋‹ˆ๊นŒ? ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ ๋ฌธ์„œํ™”ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ํŽธ์ง‘ : ๋‹ซ๊ธฐ, # 880 ๋ณต์ œ.

๋‚˜๋Š” ์ •ํ™•ํžˆ์ด ๋ฌธ์ œ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ก์„ ์œ„ํ•ด ์ €๋Š” CRA๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ œ์•ˆ ๋œ ๊ทธ๋Œ€๋กœ .babelrc ํŒŒ์ผ์„ .storybook ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ฐจ์ด๊ฐ€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ํŒŒ์ผ์—์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ด๊ธฐ ์œ„ํ•ด babel ์„ (๋ฅผ) ์–ป์œผ๋ ค๋ฉด ๋‹ค๋ฅธ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ?

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