모든 테스트는 독립적으로 실행되어야 한다. 각 테스트가 서로 영향을 준다면 해당 테스트의 결과가 통과 하더라도 신뢰할 수 없다.
이러한 테스트 독립성을 보장하기 위해 setup과 teardown을 활용할 수 있다.
- setup : 테스트를 실행하기 전 수행해야 하는 전처리작업
- teardown : 테스트를 실행한 후 수행해야하는 후처리 작업
setup과 teardown 작업을 수행하여 테스트 시작 전후로 다른 테스트에 영향을 미치지 않도록 초기화 하거나 데이터 세팅을 할 수 있고 반복적인 작업을 정의 할 수 있다.
setup - beforeEach, beforeAll
- each : 각각의 테스트 실행 전 실행된다. 하지만 describe 내에서만 실행되면 describe 블럭내에 있는 테스트에만 영향을 준다.
- all : 모든 테스트 테스트 실행전에 호출되지만, 실행 전에 단 한번만 호출된다.
- each와 all이 함께 사용된다면 all이 먼저 실행되고 each가 실행된다.
beforeEach(() => {console.log('root - beforeEach')}) // 2
beforeAll(() => {console.log('root - beforeAll')}) // 1 가장 먼저 실행됨
descibe('test ',() => {
beforeEach(() => {console.log('descibe - beforeEach')}) // 3
})teardown - afterEach, afterAll
- setup과 유사하지만 호출되는 시점이 다르다
- each : 각각의 테스트 완료된 후에 실행, 테스트에 의해 생성된 상태를 초기화할 경우 사용, 하지만 describe 내에 정의했다면 describe 블럭내에 있는 테스트 완료후 실행된다.
- all : 모든 테스트 실행 후 호출되지만, 스커프 및 파일 내에 테스트 실행이 모두 완료된 후 단 한번만 호출
afterEach(() => {console.log('root afterEach')}) // 1 테스트 완료 후 가장먼저 실행
afterAll(() => {console.log('root afterAll')}) // 3 모든 테스트 종료후 1번만 실행
describe('test', () => {console.log('describe after')}) // 2테스트 파일 내에서 전역변수를 사용하여 조건부로 동작을 분리하는 것은 좋지 않다.
만약 이전 테스트에서 전역 변수 someCondition을 사용하고 업데이트 했다면, 다른 테스트에 영향을 줄 수 있다.
let someCondition = false;
beforeEach(() => {
if(someCondition) {
await render(<Test />)
} else {
//...
}
})setup-teardown을 파일단위가 아니라 앱 전체에 적용
import '@testing-library/jest-dom';
// 모킹한 모듈의 호출 히스토리(기록) 초기화
afterEach(() => {
jest.clearAllMocks();
});
// 기록뿐만 아니라 설정된 모킹한 모듈의 구현도 초기화한다.
afterAll(() => {
jest.resetAllMocks();
});
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // deprecated
removeListener: jest.fn(), // deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
✅ Object.defineProperty(....)
Object.defineProperty(....)는 window.matchMeadia 메서드를 jest 테스트 환경에 모킹하는 것이다.
(window.matchMeadia는 CSS 미디어 쿼리가 문서와 일치하는지 여부를 확인하는 기능이다.)
DevLog