WedX - журнал о программировании и компьютерных науках

хранилище не найдено ни в контексте, ни в реквизитах «Connect (Signup)

Я пытаюсь запустить ферментные тесты, но сталкиваюсь с этой ошибкой,

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

Я использовал Redux в своем приложении, и оно хорошо работает в браузере, но не может запускать тесты в enzyme и jest.

Ниже мой код:

Для тестового файла ниже приведен код в App.test.js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../App'

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

Signup.js

import React, { Component } from 'react';
import  NavBar from './subcomponents/NavBar'
import SignUpForm from './subcomponents/SignUpForm'
import { connect } from 'react-redux'
import {userSignUpRequest} from "./actions/signUpActions";

import PropTypes from 'prop-types';

class Signup extends Component {

    render() {

        const {userSignUpRequest} = this.props;

        return (
            <div>
                <NavBar/>
                <SignUpForm userSignUpRequest={userSignUpRequest}/>

            </div>

        );
    }
}

Signup.propTypes = {

    userSignUpRequest: PropTypes.func.isRequired
}

export default connect(null, { userSignUpRequest })(Signup);

SignUpForm.js

import React, {Component} from 'react';
import {Input, Icon, Row, Card, Button, ProgressBar, Col, Preloader} from 'react-materialize'
import  '../css/signup.css'
import PropTypes from 'prop-types';

class SignUpForm extends Component {

    constructor(props) {
        super(props);

        this.state = {

                username: '',
                email:'',
                password:'',
                confirm_password:'',
                visible: true


        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {

        const {name,value}  = event.target;
        this.setState({[name]: value});


    }

    handleSubmit(event) {
        event.preventDefault();
        console.log('my state ', this.state);
        this.setState({visible: true});

        if(this.state.password.trim() === this.state.confirm_password.trim()) {

             this.props.userSignUpRequest(this.state);


        }

        else{
            alert('No  they don\'t  match');
            this.setState({visible: true});
        }


    }


    componentDidMount() {

        console.log('Parent did mount.');
        document.getElementById('text_message').style.visibility = "hidden";
        this.setState({visible: false});



    }

    render() {
        const isVisible = this.state.visible;
        return (
            <div>
                <Card className="card-effects right">

                    {isVisible && <ProgressBar  id="progress_Bar" name="progress_Bar"/>}
                    <Row>
                        <label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
                    </Row>

                    <form className="card-form-signup" onSubmit={this.handleSubmit}>
                        <Row>
                            <label className="signup-header"><b>Signup to Authors Haven</b></label>
                        </Row>
                        <Row>
                            <Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
                                <Icon className="icon-styles">account_box</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='text' name="email" value={this.state.email}  onChange={this.handleChange} placeholder="Email"    validate><Icon className="green darken-4">email</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='password'  name="password" placeholder="Password"  value={this.state.password} onChange={this.handleChange}  validate>
                                <Icon className="icon-styles">vpn_key</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
                                <Icon className="icon-styles">vpn_key</Icon></Input>
                        </Row>
                        <Row>
                            <label >Already have an account ? </label>
                        </Row>

                        <Row>
                            <Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
                        </Row>


                    </form>
                </Card>
            </div>

        );
    }

}

SignUpForm.propTypes = {

    userSignUpRequest: PropTypes.func.isRequired
}



export default SignUpForm;
09.10.2018

  • ну, ты на самом деле не используешь enzyme, не так ли? Вам нужно сделать поверхностный рендеринг вашего компонента приложения. 09.10.2018

Ответы:


1

В тесте вам все равно нужно смонтировать компоненты внутри <Provider>, чтобы все варианты использования connect() ниже по течению от приложения могли работать правильно.

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, div);
09.10.2018
Новые материалы

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


Для любых предложений по сайту: [email protected]