Skip to content

enzyme setUp with jest

Jump to bottom
toyjhlee edited this page Nov 28, 2019 · 2 revisions

package.json 에 추가

  • enzyme-adapter-react-16.3 사용 이유
    • shallow().instance() 로 Component 의 내부 함수나 property 를 접근하지 못 해서
"dependencies": {
  ...
  "enzyme": "^3.10.0",
  "enzyme-adapter-react-16": "^1.14.0",
  "enzyme-adapter-react-16.3": "^1.7.2",
  "enzyme-to-json": "^3.4.0",
  "identity-obj-proxy": "^3.0.0"
}

setupTest.js 생성

  • package.json 에서 설정(하단 참조)
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

mocks/fileMock.js 생성

  • 이미지 관련 mock file 설정 package.json 에서 설정(하단 참조)
  • 폴더 또는 파일명을 변경하면 하단의 jest 설정 시 변경하면 된다
module.exports = 'test-file-stub'

package.json 수정

  • jest 사용 기준
"jest": {
  "testPathIgnorePatterns": [
    "<rootDir>/.docz/"
  ],
  "setupFilesAfterEnv": [
    "./setupTest.js" // 위에서 생성한 파일 경로 + 파일명
  ],
  "moduleNameMapper": {
    "^@src(.*)$": "<rootDir>/src/$1", // alias
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "identity-obj-proxy" // css module 사용 시 필요
  }
},

Clone this wiki locally