Having trouble to test my component with ref using react-native-testing-library and react-native-reanimated

Question

I am trying to test my toast component (uses react-native-reanimated under the hood) using react-native-testing-library but when I try to show my toast the ref is null. I cannot understand why:

This is my test scenario:

import React from 'react';
import {
  render,
  renderHook,
  act,
  waitFor,
} from '@testing-library/react-native';
import { Toast, useToast } from '..';
import { SafeAreaProvider } from 'react-native-safe-area-context';

jest.useFakeTimers();

describe('Toast', () => {
  it('renders toast message correctly', async () => {
    const {
      result: {
        current: { toastRef, show, isVisible },
      },
    } = renderHook(() => useToast());

    const { getByTestId } = render(<Toast ref={toastRef} />, {
      wrapper: SafeAreaProvider,
    });

    act(() => {
      show({
        type: 'success',
        message: 'Hello, world!',
      });
    });

    await act(async () => {
      await waitFor(
        () => {
          expect(isVisible()).toBeTruthy();
          console.log('isvisible =====>', isVisible());
        },
        { timeout: 500 }
      );
    });

    //jest.setTimeout(1000);

    //console.log(element.toJSON());
    const message = getByTestId('taost-message');

    console.log('messageElement ====>', message);

    //expect(element).toBeTruthy();
  });
});

When call show the toast (animated view) is timing 700ms to show.

Thanks in advance for your help.

score 0 · Accepted Answer · answered Jun 27 '23 at 06:22

For those who encountered the same error, it was because I didn't use the SafeArea mock in my setup :

import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

Having trouble to test my component with ref using react-native-testing-library and react-native-reanimated

1 Answers1