Test NativeBase's `Select` component

I tried to test the Select component of NativeBase, but it took me some time to succeed. I am testing a React Native application, with Jest’s React Native preset.

Here is the code using Select component:

tsx
import React, { useState } from 'react';
import { Select } from 'native-base';
function App() {
const [selectedValue, setSelectedValue] = useState('Paris');
return (
<Select
// πŸ‘‡ We'll use the placeholder to get the current value of the select
placeholder="Select your city"
// πŸ‘‡ We'll use the accessibilityLabel to open the select
accessibilityLabel="Select your city"
selectedValue={selectedValue}
onValueChange={setSelectedValue}
>
{/*
πŸ‘‡ Each item will be targetable by its label,
which will be rendered in a <Text /> component
*/}
<Select.Item label="Paris" value="Paris" />
<Select.Item label="Berlin" value="Berlin" />
<Select.Item label="London" value="London" />
</Select>
);
}

Now, in a test, we can assert the current value of the select:

tsx
import React from 'react';
import { render, waitFor } from '@testing-library/react-native';
test('Assert current value of the select', async () => {
const screen = render(<App />);
// πŸ‘‡ A <TextInput /> rendered internally contains the current value
const selectInput = await screen.findByPlaceholderText(/select.*country/i);
await waitFor(() => {
expect(selectInput).toHaveProp('value', 'Paris');
});
});

And we can change the value of the select:

tsx
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
test('Change value of the select', async () => {
const screen = render(<App />);
// Open the select
fireEvent(
await screen.findByLabelText(/select.*country/i),
'click', // πŸ‘ˆ We must use `click` instead of `press`
);
// Click on an option by its label
fireEvent(await screen.findByText('London'), 'click'); // πŸ‘ˆ We must use `click` event too
const selectInput = await screen.findByPlaceholderText(/select.*country/i);
await waitFor(() => {
expect(selectInput).toHaveProp('value', 'London');
});
});

I could not determine the reason, but the inner components of the select listen to click event instead of press event.