front-end Test

도입부

행복한 가정은 서로 닮았지만 불행한 가정은 모두 저마다의 이유로 불행하다 [톨스토이 - 안나 카레니나, 2011 번역 - 펭귄클래식코리아]

하나의 문제는 하나의 원인으로 이루어 지지 않는다

테스트는 deterministic 해야한다. (언제 실행되든 항상 같은 결과를 내야한다.)

issue

[Error: This browser does not support 'ResizeObserver' out of the box. Please provide a polyfill as a prop.]

해결 import 'resize-observer-polyfill/dist/ResizeObserver.global'

용어 정리

TDD: test driven development
BDD: Behaviour-Driven Development
- 어떤 행위를 해야한다. (should do someting)
- BDD는 비즈니스 요구사항에 집중하여 테스트 케이스

경우에 관한 테스트 생각 by toyjhlee

lib
- lib 를 믿어라. input 이 올바른지 확인!

Test Runner Test Mathcher Test Mock

Libaray

reat-testing-library

api-queries

cheatsheet

testing-library / jest-dom - Custom matchers

examples

React Unit Test — react-testing-library, 너를 알아가는 시간

Enzyme 에서 react-testing-library 변경 관련

`ReferenceError: document is not defined`

message

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: document is not defined

해결방법
- ReferenceError: document is not defined #422
1. testEnvironment 를 node -> jsdom 으로 변경 in package.json
2. jest 재 실행

`Property 'toBeInTheDocument' does not exist on type 'Matchers<any>`

message

Property 'toBeInTheDocument' does not exist on type 'JestMatchersShape<HTMLElement[], Matchers<void, HTMLElement[]>, Matchers<Promise<void>, HTMLElement[]>>'.

해결방법
- [Property ‘toBeInTheDocument’ does not exist on type ‘Matchers'](https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany)
- import '@testing-library/jest-dom/extend-expect

jest

daleseo.com

snapshot-testing

왜 스냅 샷 테스트인가?
- 스냅 샷 통합 테스트가 해결하는 엔드 투 엔드 테스트에서 많은 문제를 발견했습니다.
  - 스냅 샷 테스트가 시각적 회귀 테스트 대비 장점
    - 결함 없음
    - 빠른 반복 속도
    - 디버깅
-u 플래그를 사용하여 스냅 샷을 다시 생성 할 수도 있습니다
toMatchInlineSnapshot
- 스냅 샷 값이 소스 코드에 자동으로 다시 기록된다는 점을 제외하면 외부 스냅 샷 ( 파일) 과 동일하게 작동합니다 . 즉, 올바른 값이 기록되었는지 확인하기 위해 외부 파일로 전환하지 않고도 자동으로 생성 된 스냅 샷의 이점을 얻을 수 있습니다.

Testing Sass with Jest

Testing that your Sass compiles without errors
Enforcing good Sass hygiene
Testing Sass functions
Testing Sass mixins

sass file 의 내용을 테스트 한다

// root.module.scss
:root {
}

const util = require('util')
const sass = require('node-sass')
const sassRenderPromisify = util.promisify(sass.render)

export const sassRender = (options: any) => {
    return sassRenderPromisify({
        // Where node-sass should look for files when you use @import
        includePaths: ['./sass'],

        // Using a compact output style allows you to use concise 'expected' CSS
        outputStyle: 'compact',

        // Merge in any other options you pass when calling render
        ...options,
    })
}

it('', async () => {
    const rootModule = await sassRender({
        file: 'src/root.module.scss',
    })

    expect(rootModule.css.toString()).toContain(':root {')
})

Jest — How to Use Extend with TypeScript

declare global {
    namespace jest {
        interface Matchers<R> {
            withOut(expected: any): R
        }
    }
}

expect.extend({
    withOut(actual: any, expected: any) {
        const pass = actual % expected === 0
        const message = pass
            ? () => `expected ${actual} not to be without by ${expected}`
            : () => `expected ${actual} to be without by ${expected}`

        return {message, pass}
    }
})

canvas mock

// setupTests.ts
import 'jest-canvas-mock'

getContext mock

참고

function mockCanvas(window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function () {},
            clearRect: function () {},
            getImageData: function (x, y, w, h) {
                return {
                    data: new Array(w * h * 4),
                }
            },
            putImageData: function () {},
            createImageData: function () {
                return []
            },
            setTransform: function () {},
            drawImage: function () {},
            save: function () {},
            fillText: function () {},
            restore: function () {},
            beginPath: function () {},
            moveTo: function () {},
            lineTo: function () {},
            closePath: function () {},
            stroke: function () {},
            translate: function () {},
            scale: function () {},
            rotate: function () {},
            arc: function () {},
            fill: function () {},
            measureText: function () {
                return {width: 0}
            },
            transform: function () {},
            rect: function () {},
            clip: function () {},
        }
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return ''
    }
}

const document = jsdom.jsdom(undefined, {
    virtualConsole: jsdom.createVirtualConsole().sendTo(console),
})

const window = document.defaultView
mockCanvas(window)

worker mock

참고

대상 코드

import ExternalSourceLoaderWorker from "comlink-loader!./ExternalSourceLoaderWorker"; /

mock 코드

jest.mock('../worker', () => {
    return jest.fn().mockImplementation(() => ({
        ExternalSourceLoaderWorker: jest.fn(),
    }))
})

private method mock

class Foo {
    private prop: string;
}

const foo = new Foo()
jest.spyOn<any, string>(foo, 'prop');

Testing Sass with Jest

참고

toHaveStyleRule 에 ruls 이 많은 경우

const toHaveStyleRules = (component, property, options) => {
    let hyphen = ''
    _.each(property, (value, key) => {
        hyphen = key.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`)
        expect(component).toHaveStyleRule(hyphen, value, options)
    })
}

window 에 값 설정

jest 실행 시 내부의 class 가 window 의 지정한 property 를 참조하는 경우 아래 방법으로는 undefind 가 발행한다

Object.defineProperty(window, key, {
    value: {},
})
Object.defineProperties(window, {
    key: {
        value: {},
    },
})

아래 방법으로 해야 한다

// setupTests
window.name = {}

Timer Mocks

Jest Mock 타이머 적용하기

jest.advanceTimersByTime(1000);

7 Ways to Debug Jest Tests in Terminal

The Standard Way
Without an Initial Break
Debugging TypeScript Tests
Best Way To Debug ™️
What About CRA?
Debugging From the Command-Line
All-In-One solution - ndb

visual regression testing(시각적 회귀 테스트)

BackstopJS

E2E

E2E 테스트
E2E 테스트와 나이트왓치
Selenium에서 Cypress로 갈아탄 후기
- 결론은 Cypress가 프런트엔드 개발자를 대상으로 한다는것과 Selenium은 QA개발자를 대상으로 한다는 것이 핵심이었다고 할 수 있다.

robinwieruch

링크들

입에 쓴 보약, TDD와 BDD - 2013.05 마소 VOL. 355-2013.05
- 화성에서 온 TDD, 금성에서 온 BDD?
번역 - 리액트 + 리덕스 앱을 Jest와 Enzyme으로 테스트 하며 얻은 교훈
- 같은 환경이 아니어도 읽어볼 가치가 있다
Enzyme’s TDD approach and react-testing-library’s BDD
삭제 가능 할 듯 Enzyme vs. react-testing-library: A mindset shift
- React-testing-library
  - 장점 : jest-dom 을 사용하여 좀 더 쉽게 만들 수 있음
  - 단점 : state 에 접근 할 수 없음
- logrocket 소개
spearmint
Static vs Unit vs Integration vs E2E Testing for Frontend Apps

Lee Junghan

도입부

issue

관련 글들

용어 정리

경우에 관한 테스트 생각 by toyjhlee

Libaray

reat-testing-library

ReferenceError: document is not defined

Property 'toBeInTheDocument' does not exist on type 'Matchers<any>

jest

canvas mock

getContext mock

worker mock

private method mock

Testing Sass with Jest

toHaveStyleRule 에 ruls 이 많은 경우

window 에 값 설정

visual regression testing(시각적 회귀 테스트)

E2E

robinwieruch

form 관련 예시 및 설명

Redux

분류 전

링크들

참고

`ReferenceError: document is not defined`

`Property 'toBeInTheDocument' does not exist on type 'Matchers<any>`