2가지 질문사항입니다!
308
4 asked
1. findByRole의 name
checkbox를 findByRole로 찾아올 때
Insurance라는 이름으로 어떻게 찾는지 궁금합니다.
const insuranceCheckbox = await screen.findByRole('checkbox', {
name: 'Insurance'
});
Options.js 파일에서는
<input
type="checkbox"
id={`${name} option`}
onChange={(event) => {
updateItemCount(name, event.target.checked ? 1 : 0);
}}
/>{' '}
<label htmlFor={`${name} option`}>{name}</label>
id와 htmlFor에는 Insurance option이라고 들어가는데.. 이해가 잘 되지 않습니다..!
2. userEvent.clear() 함수
저는 userEvent.clear(HTML객체) 함수가 HTML객체(보통 input, textarea)을 초기화해주는 거라고 이해했는데요!
spinbutton은 type을 하기전에 clear를 하는데,
왜 checkbox는 click하기 전에 clear를 하지 않는건가요???
type과 click의 차이 인지 아니면 checkbox와 spinbutton의 차이인지 아니면 그 외의 이유가 있는지 궁금합니다!
Answer 2
0
안녕하세요 가은님
우선 첫번째는요
공식 사이트에 보면
https://testing-library.com/docs/queries/byrole/
You can query the returned element(s) by their accessible name or description. The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute.
text centent도 된다고 나와있습니다.
그러기에 input에 텍스트가 되는 Insurance도 가능 합니다.
두번째는 checkbox에도 clear() 해주셔도 됩니다.
https://testing-library.com/docs/ecosystem-user-event/#clearelementclear(element)
Selects the text inside an <input> or <textarea> and deletes it.
clear()는 요소안에 있는 텍스트를 지우는 것이기 때문에
checkbox이든 spinbutton이든 다 사용할 수 있습니다.
하지만 현재 만들고 있는 앱에서 clear()를 넣지않아도 에러가 나지 않기 때문에 사용하지 않았습니다 ~
감사합니다.
제공해주신 코드를 vscode에서 켜도 eslint가 안됩니다.
0
278
2
ERROR
0
209
1
테스트 시간을 단축할 수 있는 방법에 대하여 문의드립니다.
0
360
1
useState 배열값 변경의 경우 테스트 멈춤
0
411
1
test was not wrapped in act관련 질문
0
290
2
안녕하세요! 로딩 상태 테스트에 관련된 질문입니다.
0
394
1
강의 관련 내용 github 업로드 질문
0
307
1
이미지가 안보인다 하셔서 다시 질문드립니다.
0
414
2
Test Fail이 발생합니다 ㅠㅠ
0
356
1
스타일 컴포넌트 테스트 방법
0
438
1
msw 에러
0
630
1
toHaveTextContent 에러
0
442
1
msw안돼는사람
0
579
1
This could be because the text is broken up by multiple elements. 에러
0
1716
2
Type.test.js파일에 궁금한점이 생겼습니다
0
351
1
28강 수강 중 JSX 작성 방법에 대해 궁금해져서 질문 남깁니다!
0
398
1
toHaveTextContent 에서 에러가 자꾸 나는데 아무리 찾아도 잘 모르겠습니다.
0
610
2
aria-*
0
438
1
This XML file does not appear to have any style information associated with it. The document tree is shown below. 에러
1
14083
1
컴포넌트 props내려줄때 코드는 어떻게 해야하나요
0
246
0
es6 jest 미지원 오류 문의
0
855
1
test 여러 개 실행 - fail 발생
0
290
1
useMemo
0
280
1
axios 1.1.2 버전 issue ( SyntaxError: Cannot use import statement outside a module)
4
2222
5