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.
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);