Test for alerts with react-native-testing-library - react-native

Question

Can react-native-testing-library find an alert, created with Alert.alert()?
My app creates the alert as expected but this test is failing:
// test
const Wrapper = props => (
<Fragment>
<SubscriptionProductDetailScreen
product={product}
testID={"SUBSCRIPTION_DETAIL_SCREEN"}
addToCart={addToCartSpy}
{...props}
/>
</Fragment>
);
function createWrapper(customProps) {
const wrapper = render(<Wrapper {...customProps} />);
return wrapper;
}
beforeEach(() => {
wrapper = createWrapper();
});
// later, inside a describe block:
it('should show an alert if no bars are selected', async () => {
pressSubmitButton()
expect(addToCartSpy).not.toHaveBeenCalled()
// const alert = await waitForElement(
// wrapper.queryByText("Please select up to 4 free items.")
// )
const alert = wrapper.queryByText("Please select up to 4 free items.")
expect(alert).not.toBeNull()
});
// brief excerpt from the component (the onPress handler for the submit button)
addToCart() {
const freeItems = this.state.items[0]
if (!freeItems || !freeItems.selections.length) {
Alert.alert("Error", "Please select up to 4 free items.")
return
}
const item: {...}
this.props.addToCart(item)
}
The async version (waitForElement, commented) also fails.
Again, the alert works in the app itself, and the assertion that the dispatch action, called by the handler, passes.

Answer 1

Alert is not within a React application stack - it's a system feature, so it can't be directly tested with react-native-testing-library. You can however at least verify if it was executed:
import { Alert } from 'react-native'
jest.mock('react-native', () => {
const RN = jest.requireActual('react-native')
return Object.setPrototypeOf(
{
Alert: {
...RN.Alert,
alert: jest.fn(),
},
},
RN,
)
})
test('...', () => {
// ...
expect(Alert.alert).toHaveBeenCalled()
})