测试 Jest 是否显示 Toast 消息

Question

我正在使用 Jest 测试我的 React Native 应用程序，我想测试 Toast 何时显示消息。

我在我的一个回调中使用这样的吐司：

if (pinMismatch) {
       Toast.show({
              type: "error",
              text1: "invalid answer",
       });
}

我想检查下面的测试是否显示了该消息：

    it('handles unsuccessful registration due to PIN mismatch', async () => {
        const { getByText, getByTestId } = render(
                    <NavigationContainer>
                               <Registration navigation={mockNavigation} />
                    </NavigationContainer>
              );

        fireEvent.changeText(getByTestId('pin'), '123456');
        fireEvent.changeText(getByTestId('confirm-pin'), '654321');
        const registrationButton = getByText("register");
        fireEvent.press(registrationButton);

        await waitFor(() => {
                 // I want to check here that "invalid answer" was shown
        }

我怎样才能做到这一点？

Answer 1

您可以使用

getByText

匹配器，或者如果 toast 异步显示并且您需要等待它出现，则可以使用异步

findByText

匹配器。

test('...', async () => {
  //...
  expect(await screen.findByText('invalid answer')).toBeInTheDocument();
});