React Native용 Jest
6035 단어 reactjestreactnativejavascript
반응 네이티브의 기본 설정
npx react-native init unittest
추가 종속성 설치
yarn add --dev @testing-library/react-native @testing-library/jest-native
package.json에서 jest 구성을 확장하십시오.
{
"preset": "react-native",
"setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}
반응 네이티브에 대한 단위 테스트 케이스를 작성할 준비가 되었습니다. vscode를 설정하겠습니다.
Intellisense는 코드 완성에 중요합니다. 프로젝트 루트 디렉터리에 jsconfig.json 파일을 만드세요.
그 안에 다음 내용을 추가합니다.
{
"typeAcquisition": {
"include": [
"jest"
]
}
}
자동 완성을 지원하는 유형을 설치합니다.
yarn add @types/jest
테스트를 더 쉽게 만드는 플러그인을 vscode에 추가할 수 있습니다. Jest Test Explorer
몇 가지 테스트 사례를 작성해 보겠습니다.
아래와 같이 폴더 구조를 만들고,
샘플 React 네이티브 구성 요소, Banner.js
import React from 'react';
import {View, Text} from 'react-native'
const Banner = () => {
return (
<View>
<Text>Banner</Text>
</View>
)
}
export default Banner;
구성 요소에 대한 샘플 테스트 파일, Banner.test.js
import React from 'react'
import { render } from '@testing-library/react-native';
import Banner from './Banner'
describe('Banner', () => {
it('renders correctly', () => {
const { getByText } = render(<Banner />)
const textField = getByText('Banner')
expect(textField).toBeDefined()
});
})
파일을 추가한 후 파일에서 세 가지 옵션을 볼 수 있습니다. 이것은 특별한 명령을 작성하고 디버그하지 않고도 단일 테스트 케이스를 검증할 수 있는 기능을 제공합니다.
또한 프로젝트에 있는 모든 테스트 케이스의 트리 구조를 살펴보고 전체적으로 실행합니다.
그래서 그것의 랩, 당신이 작업에 유용하고 효과적인 것을 찾으시기 바랍니다.
트위터에서 나에게 말해줘
Reference
이 문제에 관하여(React Native용 Jest), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/droidmakk/jest-for-react-native-19fc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)