넥스트+typescript+jest+enzyme의 최소 샘플을 이동하고 싶습니다

나는 넥스트js+typescript+jet+enzyme의 조합을 통해 UI를 조작하는 테스트를 시작하고 싶다.
전인들의 상세한 보도가 많았지만 샘플이 풍부해 빠르게 이동해 확인하고 싶을 때 최소 샘플을 적어 두었다.

하고 싶은 일

단추를 눌렀을 때 텍스트가 바뀌는 구성 요소를 만듭니다.

Jest+enzyme로 버튼을 누르기 전에 누르면 텍스트 내용을 자동으로 테스트하는 샘플

만들기

가동 환경

macOS 11.5.2

Node.js 14.17.0

yarn 1.22.10

후술한create-next-app로 자동으로 들어오는 라이브러리 버전

react 17.0.2

nextjs 11.1.2

nextjs 응용 프로그램 만들기

typescript로 next's 프로그램을 만듭니다.

npx create-next-app --ts jestsample

필요한 라이브러리 가져오기

react17은create-next-app에 들어가고enzyme adaper의react17입니다.x가 쓰는 물건이 아직 없는 것 같아서x를 사용하다.
(yarn add면 경고하는데 이번엔 무시)

yarn add jest ts-jest enzyme enzyme-adapter-react-16 enzyme-to-json @types/jest @types/enzyme-adapter-react-16 -D

프로그램 라이브러리
jest
Jest 본체
ts-jest
Type script로 Jest를 이동하기 위해서.
enzyme
UI 작업 테스트를 위해
enzyme-adapter-react-16
enzyme를 사용할 때는 UI 라이브러리 버전에 맞는 어댑터가 필요합니다.
@types/jest
Jest의 유형 정의
@types/enzyme-adapter-react-16
enzyme 어댑터의 형식 정의
※ 스냅숏에서 구성 요소가 정의한 기능을 사용할 때도 엔지메-to-json 프로그램 라이브러리 등이 필요한 것 같지만, 이번에는 버튼을 자동으로 누르기만 하면 샘플이 필요하지 않습니다.

Jest 구성 파일 만들기

Jest--init를 실행하고, 질문에 대답하면, Jest.config.제작
(이 절의 마지막 부분에는 최종jest.config.js가 있다)
생성된 jest입니다.config.js를 열고 다음 부분을 변경합니다.

globals:

2019년issue이지만 지금 이걸 넣지 않으면 움직이지 않는다.
(tsconfig.jest.json 이후 제작)

yarn jest --init

? Would you like to use Typescript for the configuration file? › (y/N)  ← Nを入力

? Choose the test environment that will be used for testing › - Use arrow-keys. Return to submit.
❯   node  ←こちら
    jsdom (browser-like)

? Do you want Jest to add coverage reports? › (y/N)　←レポートが欲しければ y

? Which provider should be used to instrument code for coverage? › - Use arrow-keys. Return to submit.
❯   v8   ←　今回はとりあえずこちら
    babel

? Automatically clear mock calls and instances between every test? › (y/N)　←　今回はNにしておく

없으면 테스트를 수행할 때
그런 오류가 발생했습니다.

moduleFileExtensions:

주석을 취소하고 이 확장자를 사용합니다.

  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/__test__/tsconfig.jest.json',
    },
  },

preset:

이번 Babel은 ts-jest 컴파일을 사용하지 않습니다.

       var component = (0, enzyme_1.shallow)(<mybutton_1.default />);
                                              ^

    SyntaxError: Unexpected token '<'

setupFilesAfterEnv:

엔지미의 초기 처리를 호출합니다.

  moduleFileExtensions: [
    'js',
    'json',
    'jsx',
    'node',
    'ts',
    'tsx',
  ],

testMatch:

테스트 대상으로 처리할 파일 모드를 지정합니다.

preset: 'ts-jest',

마지막 제스트.config.js

마지막에 댓글을 지우면 이렇게 돼요.

  setupFilesAfterEnv: [
    '<rootDir>/__test__/setup.ts',
  ],

issue와 관련된jest용config 만들기

프로젝트 경로test__/tsconfig.jest.제이슨을 제작하여 다음과 같은 내용을 만든다.

  testMatch: [
    '**/?(*.)+(spec|test).[tj]s?(x)',
    '**/__tests__/**/*.[jt]s?(x)',
  ],

테스트용 구성 요소 만들기

src/mybutton.tsx로서 단추를 누르면 p 탭의 텍스트가 바뀌는 구성 요소입니다.
src/mybutton.tsx

module.exports = {
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/__test__/tsconfig.jest.json',
    },
  },
  moduleFileExtensions: [
    'js',
    'json',
    'jsx',
    'node',
    'ts',
    'tsx',
  ],
  preset: 'ts-jest',
  setupFilesAfterEnv: [
    '<rootDir>/__test__/setup.ts',
  ],
  testMatch: [
    '**/?(*.)+(spec|test).[tj]s?(x)',
    '**/__tests__/**/*.[jt]s?(x)',
  ],
};

Enzyme의 초기 설정 만들기

프로젝트 경로test__/setup.ts로 초기 설정 처리를 만듭니다.
(설정 파일로 지정할 수 있기 때문에 디렉터리도test로 설정하지 않을 수 있습니다)
__test__/setup.ts

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

테스트 용례 만들기

프로젝트 경로test__/mybutton.test.tsx로 테스트 용례를 제작합니다.
__test__/mybutton.test.tsx

import React, { useState } from 'react'

const MyButton = () => {
  const [label, setLabel] = useState('--')
  return (
    <div>
      <p id='label'>{label}</p>
      <button id='btn' onClick={() => setLabel('OK')}>ClickMe</button>
    </div>
  )
}

export default MyButton

package.json에서 테스트 명령 만들기

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({adapter: new Adapter()})

실행 테스트

import { shallow } from "enzyme"
import React from "react"
import MyButton from "../src/mybutton"

test('mybutton test', () => {
  const component = shallow(<MyButton />)
  // pタグのテキストを確認。find({id: 'label'}) でも良い
  expect(component.find('p').text()).toEqual('--')
  // ボタンをクリック。find({id: 'btn'}) でも良い
  component.find('button').simulate('click')
  // もう１度テキストを取り直す
  expect(component.find('p').text()).toEqual('OK')
})

이런 결과를 얻었다

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },

테스트 용례에서 toEqual("xx")처럼 변경하여 테스트에 실패하면 이렇게 된다.

yarn test