我正在尝试从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)...
?我从未见过其他测试需要同时使用这两行代码。
谢谢, Justin
更新:
我将我的测试更新如下:
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
方法两次。那么,如果我不调用两次,为什么它会失败地检测到它呢?为什么它错误地认为该方法只被调用了一次?