이번 주에는 항상 Jest, Mocha 또는 기타 도구를 사용하여 테스트를 작성하는 방법을 배우고 싶습니다. 안타깝게도 요즘에는 테스트하고 싶은 React 앱이 없지만 순수한 JavaScript로 HTML 페이지를 테스트하는 방법을 알아낼 기회가 있습니다.

나는 대부분의 튜토리얼이 React 또는 다른 JavaScript 프레임워크와 함께 Jest를 사용하고 있음을 발견했습니다. Jest로 HTML 페이지를 테스트하는 것이 정말로 가능합니까? 예!

시작하는 방법

View the demo here 샘플 HTML 페이지용. JSON을 가져오고 이를 기반으로 목록을 표시하는 간단한 페이지와 번역을 표시/숨기기 위한 버튼입니다.

루트 폴더에 이와 같이 package.json를 만들고 콘솔에서 npm install를 실행합니다.

{
    "scripts": {
        "test": "jest --watch",
        "coverage": "jest --coverage"
    },
    "devDependencies": {
        "jest": "^23.6.0"
    }
}

완료되면 앱 테스트를 시작할 수 있습니다! 파일<YOUR-FILENAME>.spec.js을 만들고 다음과 같이 테스트를 시작합니다.

const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

jest
    .dontMock('fs');

describe('button', function () {
    beforeEach(() => {
        document.documentElement.innerHTML = html.toString();
    });

    afterEach(() => {
        // restore the original func after test
        jest.resetModules();
    });

    it('button exists', function () {
        expect(document.getElementById('disable')).toBeTruthy();
    });
});

저장하고 실행npm test !

View my GitHub here for codes

내가 배운 것

1. 테스트 HTML과 React 페이지의 차이점

React에서 Enzyme을 사용하여 구성 요소shallow를 테스트하고 상태를 가져올 수 있습니다. 그러나 HTML 및 JavaScript 페이지에서 테스트할 수 있는 유일한 것은 클래스, 콘텐츠 및 함수 출력입니다. 상태별 테스트에 익숙한 경우 HTML 페이지를 테스트하는 것이 그리 편리하지 않을 수 있습니다.

순수 JS는 Jest가 테스트할 항목을 내보내지 않았으므로 끝에 다음을 추가해야 합니다.

if (typeof exports !== 'undefined') {
    module.exports = {
        getItem,
        setItems,
        triggerItem
    };
}

그런 다음 Jest는 테스트를 위해 기능을 가져오거나 내보낼 수 있습니다.

HTML의 경우 React 컴포넌트처럼 직접 가져올 수 없습니다. 전체 HTML을 가져오려면 테스트 전에 이 스니펫을 추가해야 합니다.

const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

jest
    .dontMock('fs');

또는 테스트 내부에 인라인 HTML을 작성하십시오. 예를 들어:

const html = document.createElement('div');
html.innerHTML = `<div class="lang-grid" id="language">This is a sample</div>`;
document.body.appendChild(div);

2. 비동기 코드를 테스트하는 특별한 방법

Jest를 사용하여 메뉴 버튼이 모바일 보기에 표시되는지 확인하는 것과 같은 기본 사항을 테스트하는 것은 여전히 ​​쉽습니다. 처럼:

    it('menu button exists', function () {
        expect(document.getElementById('menu-btn')).toBeTruthy();
    });

그러나 Promise와 같은 비동기 코드의 경우 다른 접근 방식을 사용해야 합니다.

가장 중요한 것은 각 테스트에서 done()를 추가하는 것입니다.

    it('get same items from json', function (done) {
        fetch.mockResponse(JSON.stringify(json))
        const {getItem} = require('../scripts/main.js');

        getItem().then(res => {
            expect(res).toEqual([{
                "phase": "Entschuldigung!",
                "trans": "Excuse me. [as in may I have your attention]."
            },
            {
                "phase": "Sprechen Sie Englisch?",
                "trans": "Do you speak English?"
            }])

            expect(res.length).toEqual(2);
            done();
        })
        .catch(err => console.log(err))
    });

Jest documentation이 말한 것처럼 테스트에서 done()를 추가하는 것이 중요합니다. 그렇지 않으면 잘못된 결과가 나올 수 있습니다.
done() 를 추가한 후 비동기 호출이 해결되고 예상된 결과를 얻을 때까지 기다립니다.

3. Jest를 사용하여 커버리지 확인

Jest에는 커버리지 기능이 내장되어 있으며 jest --coverage 를 사용하여 호출할 수 있습니다. 그러면 coverage/lcov-report/index.html에서 보고서를 볼 수 있습니다. 차트는 매우 유용하며 어떤 코드가 테스트되지 않았는지 알려줍니다.


(브랜치에서는 왜 100%가 안되나요? 마지막에 모듈문 내보내기 테스트는 건너뛰었거든요. )

커버리지 도구를 사용해 본 적이 없어서 코드가 빨간색에서 녹색으로 바뀌는 것을 보고 의욕이 생겼습니다!

테스트가 재미있나요?

글쎄요, 재미없을 수도 있지만 제 코드가 RED에서 GREEN으로 바뀌는 것을 보았을 때 확실히 만족스러웠습니다.

내 흐름에 대한 제안이 있습니까? 또는 테스트에 대한 아이디어가 있습니까? 여기에 한 줄을 남겨주세요 :)