Я тестирую программу, созданную с помощью React и Redux в Jest, и получаю эту ошибку в консоли.
console.error
Warning: Failed prop type: The prop `prop` is marked as required in `Component`, but its value is `undefined`.
Это код, который я написал для теста:
import React from 'react';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';
import App from './App';
const mockStore = configureStore([]);
describe('My Connected React-Redux Component', () => {
let store;
let component;
beforeEach(() => {
store = mockStore({
prop: [],
hasErrored: false,
isLoading: false,
});
component = renderer.create(
<Provider store = {store}>
<App />
</Provider>
);
});
it('should render with given state from Redux store', () => {
expect(component.toJSON()).toMatchSnapshot();
});
Так выглядит App.js (поставщик добавлен на index.js)
import Component from './components/Component';
function App() {
return (
<div className = "App">
<Component></Component>
</div>
);
}
export default App;
Он был обновлен!
Есть ли у Component
что-то вроде mapStateToProps
?
Да, это так. Component.propTypes = {fetchData: PropTypes.func.isRequired, items: PropTypes.array.isRequired, hasErrored: PropTypes.bool.isRequired, isLoading: PropTypes.bool.isRequired}; const mapStateToProps = (state) => { return { items: state.items, hasErrored: state.itemsHasErrored, isLoading: state.itemsIsLoading}; }; const mapDispatchToProps = (dispatch) => { return { fetchData: (url) => dispatch(itemsFetchData(url)), }; };
Ваш компонент App
отображает компонент Component
. Это Component
жалуется, что ему нужна опора. Вы должны обновить mapStateToProps
, чтобы предоставить prop
, или вы можете просто сделать:
import Component from './components/Component';
function App() {
return (
<div className = "App">
<Component prop = "foo"></Component>
</div>
);
}
export default App;
Можете ли вы опубликовать код для приложения?