在我的React Native应用程序中,我正在尝试对按钮是否包含标题“ test”进行单元测试。为此,我使用了react-native-testing-library
和Jest
/ Jest-native
。
问题是,即使我给按钮指定了“错误的”标题,也可以说“我是错误的标题”,单元测试仍可以成功运行。我尝试使用不同的匹配器,以重写组件模拟,从而消除了NativeBase成为问题的可能性,并在Google的各处进行了搜索。
这里是应测试的组件,LandingPage.js
:
import React from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import { withNavigation } from 'react-navigation';
class LandingPage extends React.Component {
render() {
return (
<View>
<Button testID="button" title='i am a title' />
</View>
);
}
}
export default withNavigation(LandingPage);
这是测试LandingPage-test.js
:
import React from 'react';
import {render} from 'react-native-testing-library';
import LandingPage from '../LandingPage';
import '@testing-library/jest-native/extend-expect';
jest.mock('react-navigation', () => ({
withNavigation: Component => props => (
<Component navigation={{navigate: jest.fn()}} {...props} />
),
}));
afterAll(() => {
jest.restoreAllMocks();
});
describe('LandingPage', () => {
it('contains a button with title test', () => {
const {queryByTestId} = render(<LandingPage />);
expect(queryByTestId('button')).toHaveProp('title', 'test');
});
});
尽管在组件中按钮标题设置为“我是标题”,但是期望使用其他标题,但是测试仍然成功运行:
但是,看来toHaveProp
的第二个参数有点无关紧要。如果我将第一个参数更改为false,例如expect(queryByTestId('button')).toHaveProp('tiiiiiiiiiiitle', 'test');
,则单元测试将失败,这是正确的,因为button
没有任何属性tiiiiiiiiiiitle
。
如Jest Native
的文档所述,可以“检查属性是否具有特定的期望值”。请参阅文档here。
对我来说,这是一个谜。