react-testing-library - 화면과 렌더 쿼리
를 사용하여 쿼리를 사용하는 방법에는 두 가지가 있습니다.
메서드에 의해 반환된 쿼리를 사용할 수 있습니다.
import React from 'react'
import { render } from '@testing-library/react'
...
const { getByText } = render(<div>Foo</div>)
expect(getByText('Foo')).toBeInTheDocument()
또는 개체를 사용할 수 있습니다.
import React from 'react'
import { render, screen } from '@testing-library/react'
...
render(<div>Foo</div>)
expect(screen.getByText('Foo')).toBeInTheDocument()
그러나 어떤 옵션을 사용하는 것이 가장 좋은지, 그 이유에 대해서는 설명서에 기재되어 있지 않습니다.
누가 좀 가르쳐 주시겠어요?
에 의해 권장되는 최신 옵션react-testing-library작가 켄트 C. Dodds 본인은 사용하기로 되어 있다.screen.
사용의 이점
screen더 이상 보관하지 않아도 된다는 것입니다.render필요한 쿼리를 추가/삭제할 때 destrastructure를 최신 상태로 호출합니다.입력만 하면 됩니다.screen.편집자의 마법 자동 완성으로 나머지를 처리하도록 해단, 이 예외는 다음과 같이 설정할 경우뿐입니다.
container또는baseElement(솔직히 이러한 옵션의 정당한 사용 사례는 더 이상 생각할 수 없습니다.이러한 옵션은 과거의 이유로 존재할 뿐입니다).
출처 : https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen
screen에 의해 제공되다@testing-library/dom그게 뭐냐면@testing-library/react를 기반으로 합니다.를 사용하는 경우screen메서드는 html 내에서 쿼리합니다.<body>다음 문서에서 설명한 바와 같이 요소:
왜냐하면 문서 전체를 조회하기 때문입니다.본문은 매우 일반적이며, DOM 테스트 라이브러리는 문서에 미리 바인딩된 모든 쿼리를 포함하는 화면 객체도 내보냅니다.몸
render()에만 있다@testing-library/react. 와 유사한 오브젝트를 반환합니다.screen디폴트로는 쿼리는 RSA에 바인드되어 있습니다.<body>기본적으로는 거의 차이가 없지만 옵션을 전달하여 동작을 맞춤화할 수 있습니다.
예를 들어, 다른 요소를 지정할 수 있습니다.<body>사용자 지정 쿼리 메서드를 제공할 수도 있습니다.
어떤 것이 가장 좋은지에 대한 당신의 질문에 답하기 위해render()더 좋은 이유는options좀 더 유연하게 만들 수 있지만, 문서를 인용하면:
옵션을 지정할 필요가 거의 없습니다.
그래도 제 취향은 다음과 같은 방법을 사용하는 것입니다.render()옵션을 추가하기로 결정한 경우 모든 쿼리를 변경할 필요가 없기 때문입니다.
언급URL : https://stackoverflow.com/questions/61482418/react-testing-library-screen-vs-render-queries
'IT' 카테고리의 다른 글
| jQuery 없이 $http로 urlencoded 폼 데이터를 POST하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
|---|---|
| Angular 2 변경 감지는 어떻게 작동합니까? (0) | 2023.02.22 |
| Redux와 릴레이의 차이점 (0) | 2023.02.22 |
| Django queryset.values()를 json으로 시리얼화하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| Angular를 만드는 방법JS 명령으로 전파를 중지하시겠습니까? (0) | 2023.02.22 |