CODEWITHSUNDEEP
react-nativetoastdetoxreact-native-toast-message
Guian
Guian

Reputation: 4708

Detox : Check Toast is called

I am using Toast from 'react-native-toast-message' in a react native application using Expo with type 'error' or 'success'

Toast.show({
  type: 'error',
  text1: 'An error occurred')
});

How can I check Toast is shown from e2e tests implemented with Detox ?

Checking testID for visibility ?

Can we set a testID in the Toast component to be checked for visibility ? I've tried to use a custom Layout, set from the Toast 'config' prop. but it didn't work.

export const toastConfig = {
  /*
    Overwrite 'success' type,
    by modifying the existing `BaseToast` component
  */
  success: (props) => (
    <BaseToast
      {...props}
      testID="Toast.success" // not found by detox
    />
  ),...

Mocking it ?

I've read the documentation on "Mocking" with detox. But this needs to use a mock file extension added during 'start' call for React native using '--sourceExts' argument. or configuring the metro bundler. Is this something we can du with Expo ?

Any help appreciated.

Upvotes: 0

Views: 32

Answers (1)

Guian
Guian

Reputation: 4708

Temporary solution

Since the react-native-toast-message library uses Detox internally, it has its own testID. By reviewing the source code, I noticed that it uses the format "toast" + componentId, allowing us to target elements like 'toastText1', for example:

await waitFor(element(by.id('toastText1')))
  .toBeVisible()
  .withTimeout(2000);

This is not an ideal solution, as these IDs are intended for internal use within the toast message project. They are not meant to be exposed and could change in the future, potentially causing failures in our E2E tests.

Upvotes: 0

Related Questions