객체지향 생활체조 원칙

단위 테스트

의식적인 연습과 학습테스트

React Tdd

• project 생성

npx create-react-app my-app --template typescript

• jest, @testing-library/react와 @testing-library/jest-dom,

  @types/jest babel-jest ts-jest 를 설치 한다.

• Jest 설치

npm i -D @testing-library/jest-dom @testing-library/react @types/jest babel-jest ts-jest

• package.json의 scripts 수정

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

• Root directory에 jest.config.js 생성

  //jest.config.js
  module.exports = {
    moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
    transform: {
      '^.+\\\\.(js|jsx)?$': 'babel-jest',
  		//es6이상 문법들을 es5문법으로 변경해주는 babel을 사용할 수 있게 함.
      '^.+\\\\.(ts|tsx)?$': 'ts-jest', 
  		//아까 npm으로 설치한 ts-jest를 통해 Typescript에서 jest를 사용할 수 있게 함.
    },
    testEnvironment: 'jsdom',
    moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/$1',
    },
    testMatch: [
      '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
      '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
    ],
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
  };
  

  //.babel.config.jest
  {
    "presets": ["@babel/preset-typescript", "@babel/preset-env"],
  }
  

  npm i -D @babel/preset-typescript @babel/preset-env
  npm install -D jest-svg-transformer
  
  moduleNameMapper :{
  ...
  '^.+\\\\.svg$': 'jest-svg-transformer', // <- 새롭게 추가
  }
  
  collectCoverageFrom: [
      "**/*.{js,jsx}",
      "!**/node_modules/**",
      "!**/vendor/**"
  ]
  

  

  → moduleNameMapper 에 "^.+\\.svg$": "jest-svg-transformer", // <- 새롭게 추가