我正在测试从React Native Button
元素调用组件方法。
由于某种原因,测试失败,除非我做这两件事。
wrapper.find(Button).first().props().onPress();
wrapper.find(Button).first().simulate('press');
字符串
如果我注解掉这两行中的任何一行,测试就会失败,表明expect(instance.toggleEmailPasswordModal).toHaveBeenCalled();
失败了。
下面是我的组件:
import React, { Component } from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import EmailPasswordModal from './EmailPasswordModal/EmailPasswordModal';
class Login extends Component {
state = {
emailPasswordModalVisible: false,
};
toggleEmailPasswordModal = () => {
console.log('TOGGLED!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
const { emailPasswordModalVisible } = this.state;
this.setState({ emailPasswordModalVisible: !emailPasswordModalVisible });
};
render() {
const { emailPasswordModalVisible } = this.state;
return (
<SafeAreaView>
<EmailPasswordModal
visible={ emailPasswordModalVisible }
close={ this.toggleEmailPasswordModal }
/>
<Text>Login Screen!</Text>
<Button
onPress={ this.toggleEmailPasswordModal }
title="Login with Email and Password"
color="#841584"
accessibilityLabel="Login with Email and Password"
/>
</SafeAreaView>
);
}
}
export default Login;
型
以下是我的测试:
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import { shallow } from 'enzyme';
import { Button } from 'react-native';
import Login from './Login';
describe('Login Screen', () => {
describe('Snapshot Tests', () => {
it('renders the screen with default state', () => {
const renderer = new ShallowRenderer();
const props = {};
renderer.render(<Login { ...props } />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
});
describe('Functional Tests', () => {
it('calls the toggleEmailPasswordModal method', () => {
const wrapper = shallow(<Login />);
const instance = wrapper.instance();
jest.spyOn(instance, 'toggleEmailPasswordModal');
wrapper.find(Button).first().props().onPress();
wrapper.find(Button).first().simulate('press');
expect(instance.toggleEmailPasswordModal).toHaveBeenCalled();
});
});
});
型
奇怪的是,当测试运行时,由于组件中的日志记录,输出两次显示“Toggled!”。
但是,如果将expect
更改为:
expect(instance.toggleEmailPasswordModal).toHaveBeenCalledTimes(1);
型
测试通过。
如果将expect
更改为:
expect(instance.toggleEmailPasswordModal).toHaveBeenCalledTimes(2);
型
测试失败,说明toggleEmailPasswordModal
只被调用了1次。
为什么我需要这两个wrapper.find(Button)...
行?我从来没有见过任何其他测试需要这两个。
谢了,贾斯汀
更新:
我更新了我的测试如下:
it('calls the toggleEmailPasswordModal method', () => {
const wrapper = shallow(<Login />);
const instance = wrapper.instance();
jest.spyOn(instance, 'toggleEmailPasswordModal');
wrapper.find(Button).first().props().onPress();
wrapper.find(Button).first().simulate('press');
expect(instance.toggleEmailPasswordModal).toHaveBeenCalled();
// I ADDED THIS SECTION HERE
expect(instance.state.emailPasswordModalVisible).toBe(true);
});
型
测试失败,因为instance.state.emailPasswordModalVisible = false
。这很奇怪,因为toggleEmailPasswordModal显然被调用了。然而,因为我怀疑它实际上被调用了两次,所以我更新了测试如下:
it('calls the toggleEmailPasswordModal method', () => {
const wrapper = shallow(<Login />);
const instance = wrapper.instance();
jest.spyOn(instance, 'toggleEmailPasswordModal');
wrapper.find(Button).first().props().onPress();
// CHANGES START HERE
// wrapper.find(Button).first().simulate('press');
// expect(instance.toggleEmailPasswordModal).toHaveBeenCalled();
expect(instance.state.emailPasswordModalVisible).toBe(true);
});
型
你猜怎么着?测试正确通过。所以明确地调用wrapper.find...
函数两次实际上是调用toggleEmailPasswordModal
方法两次。那么,为什么如果我没有调用两次,它就不能检测到它?为什么它不正确地认为方法只被调用了一次?
2条答案
按热度按时间am46iovg1#
我终于有答案了。根据Jest spyOn函数调用,我需要做
instance.forceUpdate()
来将间谍附加到组件上。字符串
现在,测试通过了!
5tmbdcev2#
另一个寻找事件的例子:
字符串