Создайте приложение React, все тестовые примеры не работают из-за 1 ошибки

Я получаю эту ошибку -:

Неизменное нарушение: не удалось найти «store» ни в контексте, ни в свойствах «Connect (Login)». Либо оберните корневой компонент в a, либо явно передайте "store" в качестве опоры для "Connect (Login)"

Мой Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './fonts/stylesheet.css';
import './index.css';
import Routes from "./routes";
import registerServiceWorker from './registerServiceWorker';
import reducer from './reducers';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

const middleware = [ thunk ]
const store = createStore(
    reducer,
    applyMiddleware(...middleware)
)

ReactDOM.render(
    <Provider store = {store}>
        <Routes />
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

И Login.js - это

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setLoginStatusAndPartnerName } from '../actions';
import Header from './header';
import Footer from './footer';

class Login extends Component {

  constructor() {
    super();
    this.state = {
      emailId: "",
      isError: false,
      partner: "",
      loginStatus: false
    };
    this.checkEmail = this.checkEmail.bind(this);
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
  }


  handleChangeEvent({ target }) {
    this.setState({
      [target.name]: target.value,
      isError: false
    });
  }

  render() {
    return (
      <div>
      <div className = "App">
        <Header/>
          <div className = "login-container">
          <form onSubmit = {this.checkEmail}>
             <div className = "email-id">
               <label>
                 Email Address
               </label>
               <input type = "text" value = { this.state.emailId }
               onChange = { this.handleChangeEvent } name = "emailId"/>
             </div>
             </form>
           </div>
       </div>
        <Footer/>
        </div>
    );
  }
}

function mapStateToProps(state) {
  const { loginStatus= false, partner='' } = state;
  return{
    loginStatus,
    partner
  }
}

function mapDispatchToProps(dispatch){
  return {
    sendLoginStatusAndInfo: (loginStatus , partner) => {
      dispatch(setLoginStatusAndPartnerName(loginStatus , partner));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Мой login.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { shallow, mount, render } from 'enzyme';
import Login from '../components/login';

describe('Login Component render', () => {

  it('login renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Login />, div);
  });

  it('checking whether the login form is present or not', () => {
   expect(shallow(<Login />).exists(<form></form>)).toBe(true)
  })

  it('renders a label of login form', () => {
   expect(shallow(<Login />).find('label').length).toEqual(1)
  })
  it('renders input box of login', () => {
   expect(shallow(<Login />).find('input').length).toEqual(1)
  })

  it('renders the login information text', () => {
  expect(shallow(<Login />).find('.login-info-text').length).toEqual(1)
  })
});

Я не уверен, что делаю не так, но все тестовые примеры не работают с одной и той же ошибкой.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
971
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

import { HashRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render((
  <Provider store = {store}>
    <HashRouter history = {history}>
      <Switch>
        <Route path = "/" name = "Home" component = {Full} />
      </Switch>
    </HashRouter>
  </Provider>
), document.getElementById('root'));

Это лучшая практика из шаблона CoreUi. Возможно ли, что маршруты в вашем повторном проекте не возвращают компонент?

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

Это потому, что вы пытаетесь протестировать компонент connected Login, но вам, вероятно, следует протестировать необработанный компонент. Добавьте export в определение вашего компонента, например:

export class Login extends Component

И импортируйте не по умолчанию (connected), а необработанный компонент в свой тест:

import {Login} from '../components/login';

Вот документы для чтения

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