[취업준비일지] - 128

1.비동기적으로 처리되는 데이터는 await로 감당할 수 있지만
반영이 오래 걸리는 비동기의 경우 테스트가 제대로 진행되지 않을 수 있기 때문에
비동저기적으로 DOM이 업데이트 되는 경우에는
getAllByRole가 아닌 wait findAllByRole을 사용해야 한다.


2.테스트를 작성할 때 /xxxx/로 작성할 경우 정규표현식으로 xxxx를 나타내며
/xxxx/i의 경우 대소문자 구분없이 xxxx(XXXX)를 나타내고
/xxxx$/의 경우 xxxx로 끝난다는 것을 의미한다.


3.테스트 진행 도중 "Unable to find role"이 출력될 경우 다음과 같은 문제일 수 있다.

1.url 주소 불일치
2.https/http 불일치
3.서버와 MSW 포트 불일치
4.mock 서버에서 잘못된 값 반환
5.mock handler 미반환 오류
6.구조분해할당이 아닌 방식으로 props 받아오기

 

결론적으로는 해당 값을 찾을 수 없다는 것이기 때문에
그 데이터를 요청하는 시점부터 받을 때 까지 정상적으로 작동하는지를 확인하고
모두 정상적으로 온다면 비동기적인 부분을 확인하자


4.테스트할 값이 바로 나타날 경우 get을 사용하고
 바로 나타나지 않는 경우 query를 사용하며 비동기식의 경우 find를 사용해야 한다.
 
 
5.Watch mode의 사용법도 잘 알고 있어야 하는데
보통은 a를 통해 변화가 생길 경우 모두 테스트했지만 
규모가 커지면 커질수록 이전에 통과한 부분은 다시 테스트 할 필요가 없어지고
그 외에도 부분적인 테스트가 필요할 수 있다.

그렇다고 기존 작업을 다 커밋해가며 변화를 조금씩 줘서 테스트를 하는 것도 비효율적이니
Watch Usage 내용을 잘 보고 필요한 기능을 사용해야 한다.

a = all tests
f = only failed tests
q = quit watch mode
p = filter by a filename regex pattern
t = filter by a test name regex pattern
enter = trigger a test run

 

테스트에 필터를 적용한 경우 제거를 위해서 테스트모드에서 
w를 입력해 다시 옵션을 표기한 다음 c를 입력하면 초기화된다.

또한 동일 모드에서도 하나만 테스트하거나 통과하려면
test.only() 형태 또는 test.skip()를 사용하면 된다.

test.only()형태는 다른 테스트는 무시하고 이 테스트만 진행되는 방식이며
test.skip()형태는 이 테스트는 무시하고 다른 테스트를 진행하는 방식이다.

only는 당연히 개별적 테스트가 필요할 경우 실행하는 방식이며
skip는 이미 완료된 테스트를 보고 싶지 않을 경우에 사용하거나
여러개의 에러가 동시에 있을 때 관련없는 부분은 임시적으로 격리하는 용도로 사용한다.


6.await를 사용해도 에러가 발생하는 경우가 있는데
이는 여러개의 promise 반환을 기다리던 중 하나의 비동기 결과를 받아도
await가 종료되어버리는 문제 떄문이다.

이를 해결하기 위해서는 waitFor를 사용해야 하는데
waitFor에는 여러가지 options 들이 존재한다.
(container, timeout, interval, onTimeout, mutationObserverOptions)

waitFor는 기존 wait 사용과 유사하지만 기존 함수를 async로 감싸는 차이가 있다.
하지만 여러개의 비동기가 아닌 경우 find만으로도 해결할 수 있으니 
모든 테스트에 waitFor를 사용할 필요는 없다.

//두개 이상의 promise가 반환될 경우 하나만 받아 에러가 생길 수 있다.
const something = await screen.findAllByRole('alert')
expect(alerts).toHaveLength(1)

//waitFor를 적용한 방식으로 여러개의 promise도 문제없다.
waitFor(async () => {
  const something = await screen.findAllByRole('alert')
  expect(alerts).toHaveLength(1)
}

 

(1).백준 3512번 Flat은 공인중개사로서 평수를 계산하고
조건에 맞는 가격을 계산해주는 문제였다.

특이하게 발코니는 평수의 2분의1로 계산해야 하고
총 평수를 구할 때는 모두 합산해야 하며
침실의 크기도 따로 출력해야 했기 때문에
침실, 발코니, 합계 3가지를 관리해야 했다.

모든 경우 sum에 추가해주고
그 뒤에 발코니 또는 침실일 경우 각각 맞는 곳에 더해줬으며
합계 - 발코니/2를 통해 기준 크기를 맞춰주고 거기에 m^2당 가격을 곱해줬다.

const input = `6 75000
8 other
3 bathroom
2 bathroom
10 kitchen
16 bedroom
7 balcony`.split('\n')

const priceForMM = input[0].split(' ').map(Number)[1]
let bedroom = 0
let balcony = 0
let sum = 0

for(let i = 1 ; i < input.length ; i++){
    const [mm, name] = input[i].split(' ')
    sum += Number(mm)
    if(name === "balcony"){
        balcony += Number(mm)
    }
    else if(name === "bedroom"){
        bedroom += Number(mm)
    }
}

console.log(sum)
console.log(bedroom)
console.log(Math.round((sum-(balcony/2))*priceForMM*1000000)/1000000)