因此,在我的程序中,当用户登录时,如果所有凭据均正确,如果有任何详细信息丢失或格式不正确,他们将进入下一页,并且屏幕上会显示警报。
如果按下按钮后已显示警报,如何在 React Native 中使用 Jest 进行测试,并确认警报文本是否正确?
我的一些组件如下所示:
...
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage)
});
错误文本是由 Google 的 Firebase 生成的,但我知道它是什么。
假设你正在使用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()
在您的规格文件中。
添加
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);
});
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]
可能未定义。