Storybook: ์Šคํ† ๋ฆฌ์ƒท๊ณผ TypeScript ๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ

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

๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ jest ์„ค์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ storybook ์„ค์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ TypeScript์™€ ํ•จ๊ป˜ storyshots ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋‚ด TypeScript ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 โ— Test suite failed to run

    ReferenceError: React is not defined

      at Object.<anonymous> (src/widgets/generic.tsx:18:28)
      at Object.<anonymous> (src/widgets/index.ts:1:25)
      at Object.<anonymous> (src/browser/render.tsx:7:23)
      at Object.<anonymous> (src/browser/shell.tsx:5:10)
      at Object.<anonymous> (src/browser/api.tsx:3:33)
      at Object.<anonymous> (src/browser/index.ts:1:23)
      at Object.<anonymous> (stories/shell.tsx:3:15)
      at newRequire (node_modules/@storybook/addon-storyshots/dist/require_context.js:73:14)
      at loadStories (evalmachine.<anonymous>:7:5)
      at ConfigApi.configure (node_modules/@kadira/storybook/dist/client/preview/config_api.js:93:9)
      at evalmachine.<anonymous>:12:26
      at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:102:3)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:100:35)
      at Object.<anonymous> (test/alt.ts:2:18)

์ด์ƒํ•œ ์ ์€ React ๊ฐ€ ๋ฐœ๊ฒฌ๋˜์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฑฐ๊ธฐ์—์„œ ์ฐธ์กฐ๋˜๋Š” ํŒŒ์ผ์˜ ์ฒซ ๋ฒˆ์งธ ์ค„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

import React = require('react');

๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์–ด๋–ค ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

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

์ž, ์—ฌ๊ธฐ์„œ ๊ฐ„๋‹จํ•œ ๋Œ€๋‹ต์€ allowSyntheticDefaultImports ์— ๋Œ€ํ•œ ์„ค์ •์ด $ tsconfig.json false ์—ฌ์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์™œ์š”? ์ž˜ ๋ชจ๋ฅด๊ฒ ์–ด.

๊ทธ๋Ÿฌ๋‚˜ Jest ๋ฐ TypeScript์™€ ํ•จ๊ป˜ Storybook ๋ฐ StoryShots๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์ด ๊ธ€์ด ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋™์•ˆ ๋ถ€๋”ชํžŒ ๋ชจ๋“  ์ž‘์€ ์žฅ์• ๋ฌผ๊ณผ ์ด๋ฅผ ๊ทน๋ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์ƒ˜ํ”Œ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

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

์ž, ์—ฌ๊ธฐ์„œ ๊ฐ„๋‹จํ•œ ๋Œ€๋‹ต์€ allowSyntheticDefaultImports ์— ๋Œ€ํ•œ ์„ค์ •์ด $ tsconfig.json false ์—ฌ์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์™œ์š”? ์ž˜ ๋ชจ๋ฅด๊ฒ ์–ด.

๊ทธ๋Ÿฌ๋‚˜ Jest ๋ฐ TypeScript์™€ ํ•จ๊ป˜ Storybook ๋ฐ StoryShots๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์ด ๊ธ€์ด ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋™์•ˆ ๋ถ€๋”ชํžŒ ๋ชจ๋“  ์ž‘์€ ์žฅ์• ๋ฌผ๊ณผ ์ด๋ฅผ ๊ทน๋ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์ƒ˜ํ”Œ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์‹ค์ˆ˜๋กœ ์ด๊ฒƒ ์œ„์— ๋–จ์–ด์กŒ์Šต๋‹ˆ๋‹ค. ts-jest ๋Š” allowsyntheticdefaultimports ๊ฐ€ true๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ babel์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“ˆ์„ ๋ณ€ํ™˜ํ•˜๊ณ  ์ด๊ฒƒ์ด ์Šคํ† ๋ฆฌ๋ถ์˜ ์›นํŒฉ ๊ตฌ์„ฑ์— ๋ฐ˜์˜๋˜์ง€ ์•Š์œผ๋ฉด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

(์ €๋Š” ts-jest ์˜ ๊ด€๋ฆฌ์ž์ž…๋‹ˆ๋‹ค)

@GeeWee , ์„ค๋ช… ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ์ž‘๋™ ์‹œ์ผฐ๊ณ  ๋‚ด ๊ฒฝํ—˜์„ ๋ฐ˜์˜ํ•˜๊ธฐ ์œ„ํ•ด์ด ๊ธฐ์‚ฌ์— ๊ฒฝ๊ณ ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

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