수동테스트
자동테스트
로컬에서 원격으로 코드를 붙이는 git push를 통해 미리 준비한 테스트 로직으로 테스트 자동으로 진행하는 방법
자동화테스트
크게 3가지로 나뉜다.
1. 통합테스트
기능들을 한꺼번에 테스트
2. 단위테스트
가장 작은 기능 하나씩 테스트
3. 종단간테스트
end to end
만약에 시나리오가 처음부터 끝까지 한 개라면 테스트는 총 한 번 진행한다
셋중에 하나만 테스트해야한다면 단위테스트를 선택할거라함
Jest
테스트를 실행하고 결과를 나타내는 도구다.
React Testing Library
시뮬레이팅 도구다.
어떻게 컴포넌트가 있는지 찾는데 도움 준다는 뜻
둘다 공식문서 있다 참고하기
——-
Given
When
Then
패턴 쓰기
코드 실습 짜투리시간으로 보느라 못함. 나중에 하기
npm test 엔터
npm test 해서
All test 누르면 1개 검사 실행됨
———
Greeting.js만들면
Test 파일은 똑같이
Greeting.test.js
———
test(‘test 내용‘, () => {})
여기서는 Greeting test잖아
Given
When
Then
Greeting.js 검사해야하니까 그 Greeting import해줘야함
render(<Greeting />)
컴포넌트 렌더링 되면 해주면 됨
————
screen.getByText(/Greeting/);
Greeting이라는 텍스트를 가진 스크린 엘리멘트를 받아올 수 있다.
const 로 받을 수 있음 그 값이 true, false됨
그러면 로직 추가
expect(GreetingElement).toBeIntheDocument();
———-
여러 개의 테스트 수트(suite)를 그룹화하기
하나하나 테스트 케이스를 테스트 수트라고 함
describe코드로 대분류해서 여러 개 그룹화 가능
describe(“Greeting Component”, () => {
}
)
————
Part2
사용자 인터랙션 및 상태 테스트 하기
비동기 테스트하기
모킹하기
const [changedText, setChangedText] = useState(false);
const changeTextHandler = () => {}
Return에 html태그로 함
<button onclick={changeTextHandler}><button/>
위에 이렇게 적응함
Return ()
소괄호 안에 적는다.
<div>
{changedText && <p>바뀌었습니다.</p>}
{!changedText && <p>안바뀌었습니다.</p>}
</div>
button역할하는 element를 들고온다.
const buttonElement = screen.getByRoll(“button”);
페이지가 사용자인터랙션를 인지를 하려면
act함수를 사용해야하고
이벤트이기때문에 사용자 이벤트를 써야한다.
userEvent
userEvent.click(buttonElement);
Then
const outputElement = screen.getByText(/바뀌었습니다/);
Document에 있는지 확인
expect(outputElement).toBeIntheDocument();
True false로 결과값 나올 걸?
queryByText 함수로 해당 텍스트가 문서에 존재하지 않는지 확인합니다.
————
위의 비동기 테스트는 다음과 같이 이루어집니다.
render(<Async />): Async 컴포넌트를 렌더링합니다. 이 시점에서 비동기 요청이 시작되며, 결과적으로 데이터가 불러와지고 렌더링될 것으로 예상됩니다.
waitFor 함수: 이 함수는 주어진 콜백 함수가 에러 없이 완료될 때까지 기다립니다. 여기서는 screen.findAllByRole("listitem")를 통해 페이지에 렌더링된 모든 목록 항목들을 찾습니다. 만약 5초 내에 목록 항목을 찾지 못하면, waitFor 함수는 에러를 발생시키며 테스트는 실패하게 됩니다.
expect(articleList).not.toHaveLength(0): 최종적으로 waitFor 함수가 성공적으로 완료되면, articleList에는 렌더링된 목록 항목들이 저장되게 됩니다. 그리고 이 테스트는 articleList가 비어있지 않음, 즉 하나 이상의 목록 항목이 렌더링되었음을 확인함으로써 Async 컴포넌트의 기대한 동작을 검증합니다.
우선 Async 컴포넌트는 렌더링과 동시에 비동기 요청이 시작됩니다.
따라서 테스트 하려는 행동이 렌더와 동시에 자동으로 시작되기 때문에, WHEN 항목에 따로 코드를 작성할 필요가없습니다.
그리고 비동기 로직을 테스트할때는 예시와 같이, getXXX 메서드가 아닌, findXXX 메서드를 통하여
Promise 객체를 받아서 테스트 합니다.
그 이유는 Testing Library에서 제공하는 getBy와 findBy는 각각 동기적인 방식과 비동기적인 방식으로 요소를 찾습니다.
getBy는 페이지에서 바로 해당 요소를 찾으려고 시도하며, 만약 해당 요소가 없으면 즉시 에러를 반환합니다.
따라서 getBy는 동기적인 동작을 테스트하는 데 적합합니다.
반면에 findBy는 비동기적으로 요소를 찾으려고 시도합니다. 페이지에서 해당 요소를 찾는 데 시간이 걸릴 수 있으므로,
이 메서드는 Promise를 반환하며, 해당 요소가 나타날 때까지 기다립니다.
따라서 findBy는 비동기적인 동작을 테스트하는 데 적합합니다.
——————————
**mocking이 감싸다라는 뜻이라는데?
놀린다 라는 말 아님?
모킹하는 방법
자바스크립트에서는 jest와 같은 테스트 프레임워크를 사용해 쉽게 모킹을 할 수 있습니다.
아래 예시를 한번 보겠습니다.
jest.mock('axios');
axios.get.mockResolvedValue({ data: 'mocked data' });
// 이제 axios.get 메서드를 호출하면 항상 Promise가 반환되며,
// 이 Promise는 'mocked data'를 값으로 가지게 됩니다.
위 코드에서 jest.mock('axios')는 axios 모듈을 모킹합니다.
그리고 axios.get.mockResolvedValue를 사용해 axios.get 메서드가 항상 'mocked data'를 반환하도록 설정합니다.
이러한 방식으로, 실제로는 외부 API에 요청을 보내지 않지만, 마치 실제로 요청을 보낸 것처럼 테스트를 수행할 수 있습니다.
————
전체 표현 (x: number, y: number): number => 는 "두 개의 숫자 매개변수를 받고 숫자를 반환하는 함수"를 정의한다는 것을 의미합니다. 함수 본문은 중괄호 {}로 둘러싸여 있으며, 이곳에서 실제로 함수가 어떻게 동작하는지 구현됩니다.
——————
toBeNull()
널로 만드는 함수
——————-
queryByText & getByText 차이
The queries returned from render in React Testing Library are the same as DOM Testing Library
GetByText(‘텍스트명‘)
텍스트만 소괄호에 적으면 된다.
getBy는 에러를 던지고
queryBy는 null를 던진다
———
Async 를 이용해야 비동기테스트 가능한거임
Newsapi는 news 데이터를 긁어오는 무료 api다.
————
노트: 테스트를 꼭
describe로 감쌀 필요는 없지만, 이 방법은 관련 있는 테스트를 한곳에 모아 준다. 그리고 터미널 출력을 보다 읽기 쉽게 만들어 주며 반복적인 테스트 메시지 출력을 막아 준다. 만약 테스트 파일이 길어지면 에디터에서 필요없는 테스트 코드 블록을 접어서 가독성을 높일 수도 있다.
describe('Header', () => {
});
테스트 케이스는 test(...) 로 정의될 수 있다. 그리고 it(...) 으로 대체할 수도 있다. Jest는 둘 다 제공한다.
describe('Header', () => {
test('"How it works" link points to the correct page', () => {
});
});
———-
비동기라서
await waitFor Api를 써야한다고함
let articleList = [];
await waitFor (() => {
articleList = await screen.findAllByRole(‘listitem’)
})
expect(articleList).not.toHaveLength(0);
길이가 0이 안되여야한다는 뜻이다.
