Jest์™€ Enzyme๋กœ React Testํ•˜๊ธฐ ๐Ÿค—

_junukimยท2020๋…„ 1์›” 29์ผ
3
post-thumbnail

์ฒ˜์Œ์œผ๋กœ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ณ  ๊ฒช์€ ๊ณผ์ •๊ณผ ๋Š๋‚€์  ๊ทธ๋ฆฌ๊ณ  ์†Œ์†Œํ•œ ํŒ๋“ค์„ ์ ์–ด๋ณด๋ คํ•œ๋‹ค.

ํ…Œ์ŠคํŠธ? ํ•œ๋ฒˆ ํ•ด๋ณด์ง€ ๋ญ

ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ผ.. ์˜ค๋ž˜์ „ ๋ถ€ํ„ฐ ๋“ค์–ด์™”๊ณ  ๋งŽ์€ ์‹œ๋„๋ฅผ ํ•ด์™”์—ˆ๋‹ค. ์ด๋ก ์ ์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์ˆ˜ ๋งŽ์€ ํ”„๋กœ์ ํŠธ์— ๋„์ž…์„ ํ•ด๋ณด๋ ค ํ–ˆ์œผ๋‚˜ ๋ฒˆ๋ฒˆ์ด ์‹คํŒจํ•˜์˜€๋˜ ๊ธฐ์–ต์ด ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์‚ฌ์‹ค ์˜ค๋Š˜ ์ž‘์„ฑํ•œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๊ฐ€ ์ข‹์€ ์ฝ”๋“œ์ธ์ง€๋„ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๋ชจ๋“  ๊ฒƒ์€ ์ฒ˜์Œ์ด ์žˆ์—ˆ๊ธฐ์— ๋์ด ์žˆ๊ธฐ ๋งˆ๋ จ์ด๋‹ค. ์˜ค๋Š˜์˜ ๋„์ „์„ ํ•˜๋‚˜์˜ ์‹œ๋ฐœ์ ์œผ๋กœ ๋‘๊ณ  ๋”์šฑ ๊ณต๋ถ€ํ•ด์•ผ ๊ฒ ๋‹ค.

์„ธํŒ…

๋‚˜๋Š” TS๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  webpack์„ ์ง์ ‘ ์„ธํŒ…ํ•˜์—ฌ React ๊ฐœ๋ฐœ์„ ํ•˜๊ณ ์žˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— CRA๋ฅผ ์‚ฌ์šฉํ•˜์˜€์„ ๋•Œ ๊ธฐ๋ณธ์ ์œผ๋กœ install ๋˜์–ด์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์ง์ ‘ ๋‹ค์šด๋ฐ›์•„์•ผํ–ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ๊ด€๋ จํ•ด์„œ 1~2๋…„ ์ „ ๊ธ€์€ ๋งŽ์•˜์ง€๋งŒ ์ตœ๊ทผ ๊ธ€์€ ์—†์–ด์„œ ํ•˜๋Š” ์ˆ˜ ์—†์ด ์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ์™€ ์‚ฌ์ดํŠธ์—์„œ ์ •๋ณด๋ฅผ ๋ชจ์•˜๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋‚˜๋Š” ์ด์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ install ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

enzyme

npm i -D enzyme enzyme-adapter-react-16 enzyme-to-json @types/enzyme

jest

npm i -D jest ts-jest babel-jest @types/jest

react-test-renderer

npm i -D react-test-renderer @types/react-test-renderer

๊ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ์„ค๋ช…์€ velopert๋‹˜์˜ ๋ฆฌ์•กํŠธ ํ…Œ์ŠคํŠธ ๊ธ€์— ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด์žˆ๋‹ค.

jest.config.js

๊ฐ„๋‹จํ•˜๊ฒŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค์šด ๋ฐ›๊ณ  test setting์„ ํ•ด์•ผํ•œ๋‹ค. ๊ทธ๋ž˜์„œ jest.config.js๋ฅผ ์„ค์ •ํ•˜๋Š”๋ฐ ์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ์—์„œ jest์˜ ํŒŒ์ผํ™•์žฅ์ž๋ฅผ js๋กœ ์„ค์ •ํ•˜์˜€์—ˆ๋‹ค. webpack.config.ts๋‚˜ postcss.config.ts๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ํ™•์žฅ์ž๋ฅผ ts๋กœ ํ•˜์—ฌ๋„ ์˜ค๋ฅ˜์—†์ด ์ž˜ ๋Œ์•„๊ฐ€์„œ ๋‹น์—ฐํžˆ jest.config.ts๋กœ ๋‘๊ณ  ์„ธํŒ…์„ ํ•˜์˜€๋Š”๋ฐ ๊ณ„์† ์•Œ ์ˆ˜ ์—†๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๋‹ค.

์„ค๋งˆ ํ•˜๊ณ  ํ™•์žฅ์ž๋ฅผ js๋กœ ๋ฐ”๊ฟ”๋ณด์•˜๋Š”๋ฐ.. ๋งŒ๋“ค์–ด ๋‘” ์„ธํŒ…์ด ์ž˜ ์ž‘๋™๋˜์„œ ๋‹นํ™ฉํ–ˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ํ™•์žฅ์ž๋ฅผ js๋กœ ํ•˜์ž.

jest.config.jsํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•ด ์ค€๋‹ค.

jest.config.js

module.exports = {
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
      diagnostics: true
    }
  },
  moduleFileExtensions: ["ts", "js", "tsx", "jsx"],
  moduleNameMapper: {	// ์ ˆ๋Œ€ ๊ฒฝ๋กœ
    "^src/(.*)": "<rootDir>/src/$1",
    	...
  },
  transformIgnorePatterns: ["./node_modules/"],
  preset: "ts-jest",
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  testMatch: ["**/test/**/*.test.(ts|tsx)"],
  testEnvironment: "node",
  snapshotSerializers: ["enzyme-to-json/serializer"],
  setupFilesAfterEnv: ["./src/test/setUpTest.ts"]
};

๋‚˜๋Š” ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์ ˆ๋Œ€๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ jest์—์„œ ์ ˆ๋Œ€ ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๋ ค๊ณ  ํ•˜๋‹ˆ ์กฐ๊ธˆ ์•  ๋จน์—ˆ๋‹ค. ๋ถ„๋ช… ์‹œํ‚ค๋Š” ๋Œ€๋กœ ํ•˜๊ณ , ๋‚˜์™€์žˆ๋Š”๋ฐ๋กœ ์„ค์ •ํ–ˆ๋Š”๋ฐ ์™œ ์•ˆ๋ ๊นŒ.. ์‹ถ์—ˆ๋Š”๋ฐ!

ํ˜„์žฌ ์œ„์˜ ์ฝ”๋“œ์—์„œ moduleNameMapper๋ถ€๋ถ„์ด ์ ˆ๋Œ€๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ถ€๋ถ„์ด๋‹ค. ๋ณด๋ฉด ์•Œ๊ฒ ์ง€๋งŒ ๋‚˜๋Š” src ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ ํ‘œ๊ธฐํ–ˆ๋‹ค.

"^src/(.*)": "<rootDir>/src/$1"

์ด์™€ ๊ฐ™์ด ์ ํ˜€์žˆ๋Š”๋ฐ "^src/(.*)"์—์„œ ^๋ฅผ ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ์ž์—ด ๊ตฌ๋ฌธ์ธ ์ค„ ์•Œ๊ณ  ๋นผ๊ณ  ์ ์—ˆ๋‹ค๊ฐ€ ์ ˆ๋Œ€ ๋กœ ์„ค์ •์ด ์ž˜ ์•ˆ๋ฌ๋‹ค..

๊ทธ๋ฆฌ๊ณ  "<rootDir>/src/$1"์—์„œ <rootDir>๋ฅผ ๋‚˜์˜ ๋””๋ ‰ํ† ๋ฆฌ์˜ root๋ฅผ ์ ์œผ๋ผ๋Š” ์ค„ ์•Œ๊ณ  .์„ ์ฐ์—ˆ๋‹ค๊ฐ€ ์ ˆ๋Œ€๊ฒฝ๋กœ ์„ค์ •์ด ์ž˜ ์•ˆ๋˜์—ˆ๋‹ค.

์ด ๋ถ€๋ถ„ ๊ผญ ์ฐธ๊ณ ํ•ด์„œ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์ž.

ํ˜น์‹œ ํ–ˆ๊ฐˆ๋ฆด ์ˆ˜ ์žˆ์œผ๋‹ˆ tsconfig.json๊ณผ jest.config.js์˜ ์ ˆ๋Œ€๊ฒฝ๋กœ ๋ถ€๋ถ„์„ ์‚ฌ์ง„์œผ๋กœ ์˜ฌ๋ ค๋†“์•˜๋‹ค.

์ด์ œ ๋งˆ์ง€๋ง‰์œผ๋กœ package.json์˜ scriptํƒญ์—๋‹ค๊ฐ€ ์‹คํ–‰ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด ์ค€๋‹ค.

package.json

{
  ...
  "scripts": {
  	...
    "test": "jest"
   }
 }

์ด๋ ‡๊ฒŒ Typescript์™€ Jest, enzyme๋ฅผ ์ด์šฉํ•œ Test setting์„ ๋งˆ์น  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  src/test/**/*.test.(ts|tsx)์— test ํŒŒ์ผ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๋Š๋‚€์ ๊ณผ ํŒ

๋‚˜๋Š” ํ•˜๋‚˜๋ฅผ ํ•˜๋”๋ผ๋„ ๋‚ด๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋Š” ์—ญ๋Ÿ‰ ์•ˆ์—์„œ ์ตœ๋Œ€ํ•œ ์™„๋ฒฝํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์–ดํ•˜๋Š” ์™„๋ฒฝ์ฃผ์˜์ž ์ด๋‹ค. ๊ทธ๋ž˜์„œ ํ…Œ์ŠคํŠธํ™˜๊ฒฝ์„ ์„ค์ •ํ•  ๋•Œ๋„ ์ตœ๋Œ€ํ•œ์œผ๋กœ ์„ค์ •ํ•ด๋ณด์•˜์ง€๋งŒ ์•„๋ฌด๋ž˜๋„ ์•„์ง ์—‰์„ฑํ•œ ๋ถ€๋ถ„์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋‚˜์ค‘์— ๊ผญ ์‹œ๊ฐ„๋‚˜๋ฉด ๋ณด์™„ํ•  ๊ฒƒ ์ด๋‹ค.

ํŒ

  • jest.config.ts (x) -> jest.config.js (o)
  • ์„ ํ†ต์งธ๋กœ ๋„ฃ์„ ๊ฒƒ.
profile
https://junukim.dev <- ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€