Шуточное тестирование для реакции + сокращение, говорящее неопределенное значение в опоре

Я тестирую программу, созданную с помощью 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;

Можете ли вы опубликовать код для приложения?

Dean James 12.12.2020 22:04

Он был обновлен!

lhlou 12.12.2020 22:06

Есть ли у Component что-то вроде mapStateToProps?

Dean James 12.12.2020 22:10

Да, это так. 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)), }; };

lhlou 12.12.2020 22:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
452
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш компонент App отображает компонент Component. Это Component жалуется, что ему нужна опора. Вы должны обновить mapStateToProps, чтобы предоставить prop, или вы можете просто сделать:

import Component from './components/Component';

function App() {

  return (
    <div className = "App">
        <Component prop = "foo"></Component>
    </div>
  );
}

export default App;

Другие вопросы по теме