바닐라 js 프로젝트에서 jest를 처음부터 설정하십시오.

때때로 저는 처음부터 웹 프로젝트를 설정하는 것을 봅니다. create-react-app (React를 사용하는 경우)을 사용하면 아주 쉬운 것이 있지만 바닐라에서는 그렇게 부드럽지 않습니다.

➡️ This occasion we needed at work a vanilla js project.

동료가 webpack을 설정 중이었고 jest 활성화를 요청했습니다.

그리고 저는 "확실히 이 작업은 기껏해야 10분 정도 걸릴 것입니다"라고 생각했습니다.



더 오래 걸렸습니다.

1. 농담 설치

첫 번째 단계는 obv입니다.

$ yarn add -D jest

  ...
  "html-webpack-plugin": "^5.5.0",
+ "jest": "^28.0.3",
  "postcss-loader": "^6.2.1",
  ...

2. 기본 구성

다음으로 기본 구성을 생성할 jest CLI 도구를 호출합니다.

 $» jest --init

The following questions will help Jest to create a suitable configuration for your project

✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Would you like to use Typescript for the configuration file? … no
✔ Choose the test environment that will be used for testing › jsdom (browser-like)
✔ Do you want Jest to add coverage reports? … no
✔ Which provider should be used to instrument code for coverage? › babel
✔ Automatically clear mock calls, instances and results before every test? … no

➡️ Note: Here we've taken one relevant decision. test environment is jsdom since we're building a web app, we want a browser-like environment.

[삼]. 선택적 단계

우리는 루트 폴더에서 dot-files-pollution을 줄이려고 노력합니다. 기본적으로 모든 도구 관련 구성 파일을 수집하여 config/로 이동합니다.

$» mv jest.config.js config/

이는 jest.config.js에서 미묘한 조정을 의미합니다.

...
- roots: ['src']
+ roots: ['../src'],
...

또한 package.json에서 새 경로를 고려합니다.

...
- "test": "jest"
+ "test": "jest --config=config/jest.config.js"
...

4. Jest 구성

Jest는 노드를 통해 실행됩니다. From the docs :

Jest runs the code of your project as JavaScript, hence a transformer is needed if you use some syntax not supported by Node out of the box.

우리는 브라우저를 가지고 놀고 있기 때문에 babel-jest 이 필요합니다.

$» yarn add -D babel-jest @babel/preset-env @babel/core

  ...
+ "@babel/core": "^7.17.9",
+ "@babel/preset-env": "^7.16.11",
+ "babel-jest": "^28.0.3",
  ...

jest.config.js에서 이 줄을 추가합니다.

+ transform: {
+   '\\.[jt]sx?$': 'babel-jest',
+ },

그리고 (아직 가지고 있지 않은 경우) 새로운 제품config/babel.config.json

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env"
            ],
        }
    }
}

5. 실제 테스트로 시도해 보세요.

튜토리얼에서 내가 가장 싫어하는 것 중 하나는 그들이 가짜 안녕하세요 세계 예제를 사용한다는 것입니다.

실제 테스트는 다음과 같습니다.

import axios from 'axios';
import api from './api';

jest.mock('axios');

afterEach(() => {
    jest.clearAllMocks();
});

test('getLayoutData() [200]', async () => {
    axios.get.mockResolvedValue({ status: 200, data: { layout: 'hello world' } });

    const id = 42
    const layoutData = await api.getLayoutData(id, { someQueryParam: true });

    expect(layoutData).toEqual({ layout: 'hello world' });
    expect(axios.get).toHaveBeenCalledTimes(1);
    expect(axios.get).toHaveBeenCalledWith('https://fake-url.api.test/v1/layouts/42', {
        headers: {
            'x-api-key': '==API KEY TEST==',
        },
        params: {
            someQueryParam: true,
        },
    });
});

I bet you have one of those at your real world problems

6. ENV 변수

우리 코드는 두 가지 환경 변수에 의존합니다. 이 두 값: 'https://fake-url.api.test' 및 '==API KEY TEST==' .

다음을 추가해 보겠습니다.

에서 config/jest.config.js

+setupFiles: ['./jest-env-vars.js']

config/jest-env-vars.js

process.env.API_URL = 'https://fake-url.api.test';
process.env.API_KEY = '==API KEY TEST==';

그리고... 실패 🤔

7. 비동기 대기 활성화

무슨 일이 일어나고 있는지 바로 말하자면 또 다른 babel 플러그인이 필요하다는 것입니다: @babel/plugin-transform-runtime
babel.config.js에서 플러그인을 활성화합니다.

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env"
            ],
+            "plugins": [
+                "@babel/plugin-transform-runtime"
+            ]
        }
    }
}

8. 마무리 💅

어느 시점에서 일부 구성 요소를 렌더링하고 Testing Library의 편리한 메서드 toBeInTheDocument() , toBeVisible()를 원하는 구성 요소를 테스트합니다

$» yarn add -D @testing-library/jest-dom

에서 config/jest.config.js

+ setupFilesAfterEnv: ['./setup-tests.js'],

config/setup-tests.js

import '@testing-library/jest-dom';

요약

단 7개의 개발 종속성으로

@babel/core

@babel/preset-env

@babel/plugin-transform-runtime

@testing-library/jest-dom

babel-jest

jest

jest-environment-jsdom

그리고 단지 4개의 구성 파일,

babel.config.json

jest-env-vars.js

jest.config.js

setup-tests.js

우리는 $» yarn test 작업했습니다 😅

--

Cover image People illustrations by Storyset

읽어주셔서 감사합니다 💚.