如何使用 Jest 在 React Native 中测试警报

Posted 2023-02-16

【中文标题】如何使用 Jest 在 React Native 中测试警报

【英文标题】：How to test Alert in React Native with Jest

【发布时间】：2021-12-30 07:17:25

【问题描述】：

所以在我的程序中，当用户登录时，如果所有凭据都正确，如果缺少任何详细信息或格式不正确，他们将进入下一页，并在屏幕上显示警报。

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

我的一些组件如下所示：

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

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

【参考方案1】：

在您的规范文件中。

添加

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

配置您的测试平台：

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

在每次测试之前添加一个服务获取器。

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

【参考方案2】：

假设您正在使用 react-native 的 Alert 并自己调用它，您可以像这样监视它：

import  Alert  from 'react-native';

jest.spyOn(Alert, 'alert');

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

expect(Alert.alert).toHaveBeenCalledWith(errorMessageText)

【讨论】：

我是测试新手，我花了很长时间才意识到我还需要调用 Alert.alert("")（或调用 Alert.alert 的函数）来传递测试。谢谢你帮助我