How do you test this component?

[myou11]

I am trying to test this component with the latest Jest v29, react-native-testing-library v12, but the dropdown does not seem to open upon pressing it in the test. How do you initiate opening the dropdown in a test?
I have provided my test file below

import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react-native";
import { Dropdown } from "react-native-element-dropdown";

const itemData = [
  { label: "Item 1", value: "1" },
  { label: "Item 2", value: "2" },
];

const TestComponent = () => {
  return (
    <Dropdown
      accessibilityLabel="dropdown"
      itemAccessibilityLabelField="dropdown-item"
      labelField="label"
      valueField="value"
      data={itemData}
      onChange={(value) => console.log(value)}
    />
  );
};

describe("Dropdown Test", () => {
  it("should open the dropdown and display items", async () => {
    render(<TestComponent />);

    const dropdown = screen.getByLabelText("dropdown");

    // Press the dropdown to open it
    fireEvent.press(dropdown);

    screen.debug({ mapProps: ({ accessibilityLabel, ...props }) => ({ accessibilityLabel }) });

    // Wait for dropdown items to appear
    await waitFor(() => screen.getByText(itemData[0].label));
    await waitFor(() => screen.getByText(itemData[1].label));

    // Check if the items are displayed
    const dropdownItems = screen.queryAllByLabelText("dropdown-item");
    expect(dropdownItems.length).toHaveLength(itemData.length);
  });
});

[carlolucadei]

@myou11 did you find a way to test it? I got the same issue.

[carlolucadei]

@myou11 I found how to test that component.

The main issue is related to measureInWindow method used to put in right position the modal and an issue with react-native-testing-library: #125

According to that, take a look on mine test code

/*
 * This is my reduced component that's wrapping the Dropdown component
 * used to allow enduser to choose from tree different chart types
 */ 

export const ChartSelector = (props) => {
    const { view, onChange } = props
    return <Dropdown
        testID="chart-selector"
        itemTestIDField="itemTestIDField"
        data={[
            { itemTestIDField: 'testID-1', label: 'label-value-1', value: "value-1" },
            { itemTestIDField: 'testID-2', label: 'label-value-2', value: "value-2" },
            { itemTestIDField: 'testID-3', label: 'label-value-3', value: "value-3" },
        ]}
        maxHeight={maxHeight}
        labelField="label"
        valueField="value"
        value={view}
        onChange={onChange}
    />
}

import React from 'react'
import { fireEvent, render, screen, waitFor } from "@testing-library/react-native"
import { ChartSelector } from "./ChartSelector"
import { Wrapper } from "../../../__tests__/components/wrapper"

// According to the issue on @testing-library/react-native
import { View } from 'react-native'
jest.spyOn(View.prototype, 'measureInWindow').mockImplementation((cb) => {
    cb(18, 113, 357, 50)
});

describe('ChartSelector component', () => {
    it('should invoke onChange view', async () => {
        const spy = jest.fn()
        const { getByText, getByTestId } = render(<ChartSelector
            view="value-1"
            onChange={spy}
        />, { wrapper: Wrapper(getState()) })
        

        fireEvent.press(getByTestId("chart-selector"))

        const choosedChart = getByText('label-value-1')
        await waitFor(() => expect(choosedChart).toBeDefined())
        fireEvent.press(choosedChart)
        
        await waitFor(() => expect(spy).toBeCalledWith(expect.objectContaining({
            label: 'label-value-1',
            value: 'value-1'
        })))
    })
})

I hope this helps!

[myou11]

Hi @carlolucadei, I was finally able to get around to testing this out today and it works perfectly for me! Thanks so much for figuring this out and sharing the code sample.