我是新来的本地人。尝试编写单元测试用例。但我遇到以下错误。
我的测试用例失败了
在“ Connect(Home)”的上下文中找不到“商店”。将根组件包装在中,或通过自定义React上下文pr连接选项中的ovider和Connect(Home)的相应React上下文使用者。
home.js
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native-paper';
import {
View, Text, FlatList, TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
//import { Ionicons } from '@expo/vector-icons';
import styles from './style';
import { listRepos } from '../../reducer/reducer';
import ErrorAlert from '../../common/errorAlertComponent/errorAlert';
class Home extends Component {
componentDidMount() {
this.props.listRepos();
}
FlatListItemSeparator = () => (
<View style={styles.flatListItemSeparator} />
)
renderItem = ({ item }) => (
<View style={styles.listRowContainer}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('ThumbnailViewScreen', {
albumID: item.id,
})} style={styles.listRow}>
<View style={styles.listTextNavVIew}>
<Text style={styles.albumTitle}> {item.title} </Text>
</View>
</TouchableOpacity>
</View>
);
render() {
const { error, loading, albums } = this.props;
if (error) {
return <ErrorAlert />;
}
if (loading) {
return (
<View style={{ flex: 1, paddingTop: 30 }}>
<ActivityIndicator animating={true} size='large' />
</View>
);
}
return (
<View style={styles.MainContainer} >
<FlatList
styles={styles.container}
data={albums}
renderItem={this.renderItem}
ItemSeparatorComponent={this.FlatListItemSeparator}
/>
</View>
);
}
}
const mapStateToProps = (state) => {
const storedRepositories = state.albums.map((repo) => ({ key: repo.id.toString(), ...repo }));
return {
albums: storedRepositories,
loading: state.loading,
error: state.error,
};
};
const mapDispatchToProps = {
listRepos,
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
home.test.js
/* eslint-disable max-len */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
import React, { Component } from 'react';
import 'react-native';
import { shallow } from 'enzyme';
import expect from 'expect';
import renderer from 'react-test-renderer';
import __Home from '../component/HomeComponent/home';
describe('home Screen', () => {
it('should render home component', () => {
const wrapper = shallow(
<__Home navigation={{ getParam: jest.fn() }} />,
);
});
});
如果要测试连接的组件,应使用redux-mock-store软件包来模拟redux存储。
您可能已经在App.js中初始化了商店,请在此处使用该代码,
例如,我不知道您使用了什么中间件和reducer,但是您可以对这段代码有所了解。
import React from 'react';
import renderer from 'react-test-renderer';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import reducersAll from '../../reducers';
const store = createStore(reducersAll, {}, applyMiddleware(ReduxThunk));
test('renders correctly', () => {
const navigation = {state: {params: ''}, getParam: jest.fn()};
const tree = renderer
.create(
<Provider store={store}>
<Home navigation={navigation} />
</Provider>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});