Использование поставщика, но по-прежнему отображается ошибка Нарушение инварианта: не удалось найти «магазин» в контексте «Подключить

Я просмотрел несколько ответов, но все рекомендуют обернуть основной компонент в Provider.

Я уже сделал это, но ошибка остается.

Это мой компонент App.js

const App = ({ store }) =>
  <Provider store = {store}>
    <div className = "App">
      <Users/>
    </div>
  </Provider>

И я делаю очень простой тест. Первый раз с использованием фермента,

import React from 'react'
import Adapter from 'enzyme-adapter-react-16'
import Users from './'
import { shallow, configure } from 'enzyme'

configure({adapter: new Adapter()});

describe('First React component test with Enzyme', () => {
  it('renders without crashing', () => {
    shallow(<Users />);
  });
});

Ошибка:

Нарушение инварианта: не удалось найти «магазин» в контексте «Подключение (пользователи)». Либо оберните корневой компонент в Provider, либо передайте пользовательский поставщик контекста React в Provider и соответствующий потребитель контекста React в Connect(Users) в параметрах подключения.

вы передаете магазин в свой компонент приложения в качестве опоры? Я не уверен, как вы разрушаете магазин здесь.

— 21.05.2019 05:43

@ChristopherNgo Я действительно не знаю

— 21.05.2019 05:59

reactjs store enzyme

21.05.2019 05:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

420

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Возможное решение состоит в следующем:

import React from "react";
import { shallow } from "enzyme";
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";
import Userfrom "../User";

const mockStore = configureMockStore();
const store = mockStore({});

describe('First React component test with Enzyme', () => {
  it('renders without crashing', () => {
    shallow(
     <Provider store = {store}>
      <User/>
     </Provider>
    );
  });
});

Спасибо, это сработало. Я не понимаю, почему я должен был это сделать, но это сработало

— 21.05.2019 05:58

21.05.2019 05:45