can't find children elements byId with jest and @testing-library/react-native

[rodrigodiasf1984]

Hi guys,

I'm doing unit testing with jest and @testing-library/react-native and i'm facing this problem, i can't get any children by id when they are wrapper by the Controller, can anyone help with this ?

this is my react-native component:

import React, { useState } from 'react';
  import { Text, View } from 'react-native';
  import { Controller, Control } from 'react-hook-form';
  import PhoneInput, { ICountry } from 'react-native-international-phone-number';
  
  interface ControlledPhoneInputProps {
    control: Control<any>;
    error?: string;
    name: string;
    placeholder?: string;
  }
  
  export function ControlledPhoneInput({
    control,
    error,
    name,
    placeholder,
  }: ControlledPhoneInputProps) {
    const [selectedCountry, setSelectedCountry] = useState<undefined | ICountry>(
      undefined,
    );
  
    return (
      <View
        className="flex flex-col items-center justify-center w-full h-20 mb-4"
        testID="controlled-phone-input-container"
      >
        <Controller
          control={control}
          data-testid="phone-Input-controller"
          render={({ field: { onChange, value } }) => (
            <View
              className="h-10 mb-2 w-[98%] items-center justify-center"
              testID="phone-Input-view"
            >
              <PhoneInput
                testID="phone-input"
                value={value}
                onChangePhoneNumber={onChange}
                selectedCountry={selectedCountry}
                onChangeSelectedCountry={(country: ICountry) =>
                  setSelectedCountry(country)
                }
                showOnly={['ES']}
                defaultCountry="ES"
                modalDisabled
                placeholder={placeholder}
              />
            </View>
          )}
          name={name}
        />
        {error && (
          <Text
            testID="error-phone-input"
            className="text-shape_orange font-rubik_regular text-sm"
          >
            {error}
          </Text>
        )}
      </View>
    );
  } 

this is my test:

    import React, { useState as useStateMock } from 'react';
    import { Control, FieldValues } from 'react-hook-form';
    import { ControlledPhoneInput } from '..';
    import { render } from '@testing-library/react-native';
    
    jest.mock('react-hook-form');
    
    jest.mock('react', () => ({
      ...jest.requireActual('react'),
      useState: jest.fn(),
    }));
    
    const mockControl = {} as Control<FieldValues>;
    const setSelectedCountry = jest.fn();
    
    describe('ControlledPhoneInput', () => {
      beforeEach(() => {
        (useStateMock as jest.Mock).mockImplementation(init => [
          init,
          setSelectedCountry,
        ]);
      });
      it('should render correctly', () => {
        const { getByTestId } = render(
          <ControlledPhoneInput control={mockControl} name="phone" />,
        );
        expect(getByTestId('controlled-phone-input-container')).toBeDefined();
      });
    
      it('should render the error message when error is present', () => {
        const error = 'Invalid phone number';
        const { getByTestId } = render(
          <ControlledPhoneInput control={mockControl} name="phone" error={error} />,
        );
        expect(getByTestId('error-phone-input')).toBeDefined();
      });
    
      it('should call setSelectedCountry when onChangeSelectedCountry is called', () => {
        const { getByTestId } = render(
          <ControlledPhoneInput control={mockControl} name="phone" />,
        );
    
        const container = getByTestId('controlled-phone-input-container');
        expect(container).toBeDefined();
    
        const phoneInputController = getByTestId('phone-Input-controller');
        expect(phoneInputController).toBeDefined();
    
        const phoneInputView = getByTestId('phone-input-view');
        expect(phoneInputView).toBeDefined();
        const phoneInput = getByTestId('phone-input');
        phoneInput.props.onChangeSelectedCountry({ name: 'Spain', iso2: 'ES' });
        expect(setSelectedCountry).toHaveBeenCalled();
      });
    });

this is the result of runing the last test : 

  ● ControlledPhoneInput › should call setSelectedCountry when onChangeSelectedCountry is called

    Unable to find an element with testID: phone-Input-controller

    <View
      testID="controlled-phone-input-container"
    />

      44 |     expect(container).toBeDefined();
      45 |
    > 46 |     const phoneInputController = getByTestId('phone-Input-controller');
         |                                  ^
      47 |     expect(phoneInputController).toBeDefined();
      48 |
      49 |     const phoneInputView = getByTestId('phone-input-view');

      at Object.getByTestId (src/components/ControlledPhoneInput/__tests__/ControlledPhoneInput.test.tsx:46:34)

if i remove the controller and the view inside the render the tests pass: 

![image](https://github.com/user-attachments/assets/bd83194f-af17-4b73-b82f-581ca321de3d)

what's i'm doing wrong, thanks for you're help!

[rodrigodiasf1984]

this is the result of running the tests, without the controller and the first child.