๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์ ๋ชจ๋ฅด๊ฒ ์ง๋ง 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๋ฅผ ์ฌ์ฉํ๋ ๋ฐ ๊ด์ฌ์ด ์๋ ์ฌ๋์ด๋ผ๋ฉด ์ด ๊ธ์ด ์ ์ฉํ ๊ฒ์ ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ด ์์ ์ ์ํํ๋ ๋์ ๋ถ๋ชํ ๋ชจ๋ ์์ ์ฅ์ ๋ฌผ๊ณผ ์ด๋ฅผ ๊ทน๋ณตํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ์ํ ๋ฆฌํฌ์งํ ๋ฆฌ ๋ ๋ง๋ญ๋๋ค.
์ค์๋ก ์ด๊ฒ ์์ ๋จ์ด์ก์ต๋๋ค. ts-jest
๋ allowsyntheticdefaultimports
๊ฐ true๋ก ์ค์ ๋์ด ์์ผ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก babel์ ์ฌ์ฉํ์ฌ ๋ชจ๋์ ๋ณํํ๊ณ ์ด๊ฒ์ด ์คํ ๋ฆฌ๋ถ์ ์นํฉ ๊ตฌ์ฑ์ ๋ฐ์๋์ง ์์ผ๋ฉด ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค.
(์ ๋ ts-jest
์ ๊ด๋ฆฌ์์
๋๋ค)
@GeeWee , ์ค๋ช ๊ฐ์ฌํฉ๋๋ค. ๋๋ ๊ทธ๊ฒ์ ์๋ ์์ผฐ๊ณ ๋ด ๊ฒฝํ์ ๋ฐ์ํ๊ธฐ ์ํด์ด ๊ธฐ์ฌ์ ๊ฒฝ๊ณ ๋ฅผ ์ถ๊ฐํ์ต๋๋ค. https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์, ์ฌ๊ธฐ์ ๊ฐ๋จํ ๋๋ต์
allowSyntheticDefaultImports
์ ๋ํ ์ค์ ์ด $tsconfig.json
false
์ฌ์ผ ํ๋ค๋ ๊ฒ์ ๋๋ค. ์์? ์ ๋ชจ๋ฅด๊ฒ ์ด.๊ทธ๋ฌ๋ Jest ๋ฐ TypeScript์ ํจ๊ป Storybook ๋ฐ StoryShots๋ฅผ ์ฌ์ฉํ๋ ๋ฐ ๊ด์ฌ์ด ์๋ ์ฌ๋์ด๋ผ๋ฉด ์ด ๊ธ์ด ์ ์ฉํ ๊ฒ์ ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ด ์์ ์ ์ํํ๋ ๋์ ๋ถ๋ชํ ๋ชจ๋ ์์ ์ฅ์ ๋ฌผ๊ณผ ์ด๋ฅผ ๊ทน๋ณตํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ์ํ ๋ฆฌํฌ์งํ ๋ฆฌ ๋ ๋ง๋ญ๋๋ค.