React Native Testing Library를 사용하여 타사 React Native 구성 요소를 테스트하는 방법

Jest 및 React Native Testing Library를 사용하여 타사 React Native 구성 요소를 테스트하는 것은 정말 실망스러울 수 있습니다. docs에서 본 모든 이벤트를 시도했지만 소용이 없었습니다. press , click , scroll , 전체 9야드.

하지만 피와 땀과 눈물을 흘리며 시행착오를 통해 작동하는 일반적인 접근 방식을 알아냈고 다른 사람들의 스트레스를 덜어주기 위해 공유하고 싶었습니다.
react-native-picker-select 패키지의 구성 요소에 대한 간단한 테스트를 보여줌으로써 접근 방식을 설명하겠습니다.

트리에서 구성 요소 찾기

대부분의 테스트의 첫 번째 단계는 관련된 구성 요소를 찾는 것입니다. 문제는 모든 타사 구성 요소가 testID 와 같은 소품을 직접 설정할 수 있는 옵션을 제공하지 않기 때문에 창의력을 발휘해야 했습니다.
<View> 태그 쌍으로 구성 요소를 래핑하고 <View> 와 같이 부모 testID 에 소품을 설정하는 것으로 시작합니다. 그런 다음 <View> 의 자식에 액세스하여 구성 요소를 찾을 수 있습니다. 다음은 시연할 몇 가지 샘플 코드입니다.

//CustomPickerSelect.jsx

import React from 'react';
import { View } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

const CustomPickerSelect = () => {

    return (
        <View testID='picker-select-parent'>
            <RNPickerSelect
                onValueChange={() => { }}
                items={[]}
            />
        </View>
    )
}

export default CustomPickerSelect;

//CustomPickerSelect.test.js

import { render } from '@testing-library/react-native';
import CustomPickerSelect from './CustomPickerSelect';

test('Testing CustomPickerSelect', () => {
  const { getByTestId } = render(<CustomPickerSelect />)

  const picker = getByTestId("picker-select-parent").children[0];
})

picker는 렌더링된 트리에서 타사 구성 요소ReactTestInstance를 나타내는 RNPickerSelect입니다.

발생 이벤트

타사 구성 요소의 경우 응답을 유도하는 이벤트(또는 이벤트 처리기)의 이름은 일반적으로 해당 소품에 나열됩니다. 소품은 일반적으로 문서에서 사용할 수 있지만 항상 그런 것은 아닙니다. 문서가 오래되었을 수도 있으므로 .props 의 ReactTestInstance 속성을 기록하여 사용 가능한 소품을 직접 확인하는 데 도움이 됩니다. 지금 해보자:

import { render } from '@testing-library/react-native';
import CustomPickerSelect from './CustomPickerSelect';


test('Testing CustomPickerSelect', () => {
  const { getByTestId } = render(<CustomPickerSelect />)

  const picker = getByTestId("picker-select-parent").children[0];
  console.log("picker props: ", picker.props)
})

다음은 로그의 스크린샷입니다.



우리가 사용할 주요 도구에 대해 논의하기 위해 잠시 우회해 봅시다: fireEvent . React Native Testing Library에서 제공하는 fireEvent 메서드의 구문은 다음과 같습니다.

fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>): void

data 매개변수의 의미가 명확하지 않은 경우 이는 실제로 호출되는 이벤트 핸들러에 전달될 인수를 나타냅니다.

문제는 eventName 인수에 사용할 올바른 값을 결정하는 것입니다. 여기에서 이전에 기록된 ReactTestInstance에 대한 소품을 참조합니다. 이벤트 핸들러는 일반적으로 "on-"접두사가 붙습니다(예: onPress ).
ReactTestInstance에 대한 이벤트 핸들러는 다음과 같습니다.


CustomPickerSelect.jsx 이벤트 처리기 테스트를 용이하게 하기 위해 onValueChange 구성 요소에 몇 가지를 추가해 보겠습니다.

import React, { useState } from 'react';
import { View } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

const CustomPickerSelect = () => {

    const [value, setValue] = useState("")

    return (
        <View testID='picker-select-parent'>
            <RNPickerSelect
                value={value}
                onValueChange={(newValue) => { setValue(newValue) }}
                items={[]}
            />
        </View>
    )
}

export default CustomPickerSelect;

이제 onValueChange 이벤트 핸들러를 호출하고 모든 것이 예상대로 작동하는지 확인합니다.

import { render, fireEvent } from '@testing-library/react-native';
import CustomPickerSelect from './CustomPickerSelect';


test('Testing CustomPickerSelect', () => {
    const { getByTestId } = render(<CustomPickerSelect />)

    const picker = getByTestId("picker-select-parent").children[0];
    fireEvent(picker, 'onValueChange', "A");
    expect(picker.props.value).toBe("A");
})

일반적으로 구현 세부 사항에 대해 주장하는 것은 권장되지 않지만 이를 수행하는 방법을 아는 것은 나쁠 수 없습니다 ;).

다른 테스트를 수행하려는 경우 필요한 변경을 수행할 수 있습니다. 예를 들어 다음은 CustomPickerSelect 구성 요소에 대한 prop으로 전달된 콜백 함수가 호출되는지 테스트하는 코드입니다.

import React, { useState } from 'react';
import { View } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

const CustomPickerSelect = ({ setValueCallback }) => {

    const [value, setValue] = useState("")

    return (
        <View testID='picker-select-parent'>
            <RNPickerSelect
                value={value}
                onValueChange={(newValue) => { 
                    setValue(newValue);
                    setValueCallback(newValue);
                }}
                items={[]}
            />
        </View>
    )
}

export default CustomPickerSelect;

import { render, fireEvent } from '@testing-library/react-native';
import CustomPickerSelect from './CustomPickerSelect';


test('Testing CustomPickerSelect', () => {

  const mockCallback = jest.fn();

  const { getByTestId } = render(
    <CustomPickerSelect 
       setValueCallback={mockCallback} 
    />
  )

  const picker = getByTestId("picker-select-parent").children[0];
    fireEvent(picker, 'onValueChange', "A");
    expect(mockCallback).toHaveBeenCalled();
})

지금은 그게 다입니다. 도움이 되었다면 읽어주시고 친구와 공유해 주셔서 감사합니다.

출처

https://www.npmjs.com/package/react-native-picker-select

https://callstack.github.io/react-native-testing-library/docs/api#fireevent