如何使用 Jest 测试 React Native 中的 Alert

问题描述 投票:0回答:3

因此,在我的程序中,当用户登录时,如果所有凭据均正确,如果有任何详细信息丢失或格式不正确,他们将进入下一页,并且屏幕上会显示警报。

如果按下按钮后已显示警报,如何在 React Native 中使用 Jest 进行测试,并确认警报文本是否正确?

我的一些组件如下所示:

...
.catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorMessage)
  });

错误文本是由 Google 的 Firebase 生成的,但我知道它是什么。

firebase react-native jestjs react-test-renderer
3个回答
25
投票

假设你正在使用react-native的Alert并自己调用它,你可以像这样监视它:

import { Alert } from 'react-native';

jest.spyOn(Alert, 'alert');

然后您可以检查它是否已被调用,以及使用了哪些参数:

expect(Alert.alert).toHaveBeenCalledWith(errorMessageText)

[更新]还可以测试与警报的交互:

const mockOnPress = jest.fn()

Alert.alert('Title', 'Message', [{text: 'OK', onPress: mockOnPress}])

/** 
 * here we inspect the mock to get:
 * - the latest call to Alert.alert (`calls[0]`)
 * - its third argument (`calls[0][2]`), which is the buttons config array
 * - the first button in the array and its onPress (`calls[0][2][0].onPress()`)
 */
Alert.alert.mock.calls[0][2][0].onPress()

expect(mockOnPress).toBeCalled()

1
投票

在您的规格文件中。

添加

export class FakeSubject {
    next(value: any) {}
    asObservable() {}
}

配置您的测试台:

TestBed.configureTestingModule({
    providers: [{ provide: Subject, useClass: FakeSubject }],
}),

在每次测试之前添加一个服务 getter。

beforeEach(() => {
    service = TestBed.get(AlertService);
});

添加测试,您可以使用此示例进行其他测试。

it('success alert ', () => {
    const spy = spyOn(service, 'alert');
    const message = 'hi!';
    service.success(message);
    expect(spy).toHaveBeenCalledWith(new Alert(message, AlertType.Success));
});

以及您的实用方法:

it('alert ', () => {
    subject = service['subject'];
    const spy = spyOn(subject, 'next');
    const alert = new Alert('hi', AlertType.Success);
    service.alert(alert);
    expect(spy).toHaveBeenCalledWith(alert);
});

it('clear ', () => {
    subject = service['subject'];
    const spy = spyOn(subject, 'next');

service.clear();
expect(spy).toHaveBeenCalledWith(null);
});

0
投票

StackOverflow 不会让我对现有已批准的答案发表评论,但可以使用 TypeScript 尝试遵循已接受的答案为其他人添加:

[更新]还可以测试与警报的交互:

const mockOnPress = jest.fn()

Alert.alert('Title', 'Message', [{text: 'OK', onPress: mockOnPress}])

/** 
 * here we inspect the mock to get:
 * - the latest call to Alert.alert (`calls[0]`)
 * - its third argument (`calls[0][2]`), which is the buttons config array
 * - the first button in the array and its onPress (`calls[0][2][0].onPress()`)
 */
Alert.alert.mock.calls[0][2][0].onPress()

expect(mockOnPress).toBeCalled()

为了避免

[0][2][0]
部分在可能未定义的情况下给出 TS 错误(而不仅仅是诉诸
@ts-ignore
),我创建了一个自定义类型,设置道具以匹配我们在正在测试的代码中使用
Alert.alert
的方式所以按钮将被定义:

type AlertSpyProps = jest.SpyInstance<
  void,
  [
    title: string,
    message: string,
    buttons: [
      {
        text: string
        style: AlertButton['style']
        onPress: (value?: string) => void
      },
      {
        text: string
        style: AlertButton['style']
        onPress: (value?: string) => void
      },
    ],
  ]
>
const AlertSpy = jest.spyOn(Alert, 'alert') as AlertSpyProps

此后 TS 不再抱怨

[0][2][0]
可能未定义。

© www.soinside.com 2019 - 2024. All rights reserved.