Попытка написать модульные тесты для кода ReactJs, используя Jest. Когда я пытаюсь передать реквизит, он показывает мне ошибку ниже

TypeError: Невозможно прочитать свойство ’email’ из неопределенного

62 | 63 | const mapStateToProps = state ={amp}gt; { {amp}gt; 64 | const { email, password, errors, loading } = state.auth; | ^ 65 | 66 | return { email, password, errors, loading }; 67 | }; 

SignIn.js

 import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; import * as actions from "Actions"; import classnames from "classnames"; class SignIn extends Component { onSubmit(e) { e.preventDefault(); const { email, password } = this.props; this.props.loginUser({ email, password }); } render() { const { email, password, errors, fieldChanged } = this.props; return ( {amp}lt;div className="contentWrapper"{amp}gt; .... {amp}lt;/div{amp}gt; ); } } SignIn.propTypes = { loginUser: PropTypes.func.isRequired, fieldChanged: PropTypes.func.isRequired, email: PropTypes.string.isRequired, password: PropTypes.string.isRequired }; const mapStateToProps = state ={amp}gt; { const { email, password, errors, loading } = state.auth; return { email, password, errors, loading }; }; export default connect( mapStateToProps, actions )(SignIn); 

SignIn.test.js

 import React, { Suspense } from 'react'; import Enzyme, {shallow} from 'enzyme'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-15'; Enzyme.configure({ adapter: new Adapter() }); import { Provider } from 'react-redux'; import configureMockStore from "redux-mock-store"; import thunk from 'redux-thunk'; import SignIn from '../containers/authentication/SignIn'; import mapStateToProps from "../containers/authentication/SignIn"; const mockStore = configureMockStore(); describe('SignIn', () ={amp}gt; { it('render sign in', () ={amp}gt; { const state = { email: "aaky8668@gmail.com", password: "pass123" }; const store = mockStore(state); const dwrapper = Enzyme.mount({amp}lt;SignIn store={store} /{amp}gt;); console.log(dwrapper); expect(dwrapper.props().email).toBe("aakshay8668@gmail.com") }); }); 

Нужно провести модульное тестирование SignIn и получить эту ошибку, как отобразить состояние с помощью реквизита?

Какой будет правильный способ отображения состояния с помощью реквизита.

А. Гарг

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Вам нужно будет подключить ваш смонтированный компонент, обернув его с Provider и вашим фиктивным хранилищем, чтобы получить доступ к хранилищу примитивов в ваших модульных тестах с помощью Enzyme / Jest.

 import { Provider } from 'react-redux'; // other imports describe('SignIn', () ={amp}gt; { it('render sign in', () ={amp}gt; { const state = { email: "aaky8668@gmail.com", password: "pass123" }; const store = mockStore(state); const dwrapper = Enzyme.mount( {amp}lt;Provider store={store}{amp}gt; {amp}lt;SignIn /{amp}gt; {amp}lt;/Provider{amp}gt;); console.log(dwrapper); expect(dwrapper.props().email).toBe("aakshay8668@gmail.com") }); }); 

Линия

 const { email, password, errors, loading } = state.auth; 

пытается деструктурировать state.auth , пытается сохранить свою email , password , errors , loading членов в переменные с одинаковыми именами. Ошибка indicates that state.auth не undefined . Вам нужно убедиться, что это состояние существует, у него есть элемент auth который имеет атрибуты имен, ожидаемых вашим кодом выше.

Я сторонник обхода редукционной части и независимого тестирования actions и reducers . Поэтому я бы рекомендовал экспортировать class и импортировать его для вашего теста.

Рабочий пример (перейдите на вкладку « Tests » для запуска тестов):

Изменить защищенный маршрут - Redux


контейнеры / Вход / index.js

 import React, { Component, Fragment } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { login } from "../../actions/Auth"; import Form from "../../components/Form"; import SubTitle from "../../components/SubTitle"; import Title from "../../components/Title"; export class Login extends Component { state = { email: "", password: "" }; handleChange = ({ target: { name, value } }) ={amp}gt; this.setState({ [name]: value }); handleSubmit = e ={amp}gt; { e.preventDefault(); const { email, password } = this.state; if (!email || !password) return; this.props.login(email); }; render = () ={amp}gt; ( {amp}lt;Fragment{amp}gt; {amp}lt;Title{amp}gt;Login{amp}lt;/Title{amp}gt; {amp}lt;SubTitle{amp}gt;You must login before viewing the dashboard!{amp}lt;/SubTitle{amp}gt; {amp}lt;Form onSubmit={this.handleSubmit}{amp}gt; {amp}lt;input name="email" type="email" className="uk-input" placeholder="email" value={this.state.email} onChange={this.handleChange} /{amp}gt; {amp}lt;input className="uk-input" name="password" type="password" placeholder="password" value={this.state.password} onChange={this.handleChange} /{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;button className="uk-button uk-button-primary" type="submit"{amp}gt; Login {amp}lt;/button{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/Fragment{amp}gt; ); } Login.propTypes = { login: PropTypes.func.isRequired }; export default connect( null, { login } )(Login); 

контейнеры / Логин / __ тесты __ / Login.test.js

 import React from "react"; import { mount } from "enzyme"; import { Login } from "../index"; const login = jest.fn(); const initProps = { login }; describe("Login", () ={amp}gt; { let wrapper; beforeEach(() ={amp}gt; { wrapper = mount({amp}lt;Login {...initProps} /{amp}gt;); }); afterEach(() ={amp}gt; { login.mockClear(); }); it("renders without errors", () ={amp}gt; { expect(wrapper.find("form").exists()).toBeTruthy(); }); it("calls handleChange class field to update an input with a value", () ={amp}gt; { const value = "test@test.com"; wrapper .find("input") .first() .simulate("change", { target: { value, name: "email" } }); expect(wrapper.state("email")).toEqual(value); expect( wrapper .find("input") .first() .props().value ).toEqual(value); }); it("doesn't call 'login' prop if email or password fields are empty", () ={amp}gt; { wrapper.find("form").simulate("submit"); expect(login).toHaveBeenCalledTimes(0); }); it("calls 'login' prop to log in a user", () ={amp}gt; { const email = "test@test.com"; wrapper.setState({ email, password: "password" }); wrapper.find("form").simulate("submit"); expect(login).toHaveBeenCalledWith(email); }); }); 

SignIn.test.js

Ключевым решением также является то, что мы должны добавить dive () к мелкому компоненту, чтобы он мог получить оболочку компонента полностью, это решение работало для меня

 import React, { Suspense } from 'react'; import Enzyme, { shallow, configur } from 'enzyme'; import EnzymeAdapter from 'enzyme-adapter-react-15'; import SignIn from '../containers/authentication/SignIn'; import configureStore from '../configureStore'; Enzyme.configure({ adapter: new EnzymeAdapter(), disableLifecycleMethods: true }); describe('SignIn', () ={amp}gt; { it('render sign in', () ={amp}gt; { const state = { auth: { email: "test@test.com", password: "password", errors: { login: "red" }, loading: true } }; const store = configureStore(state); const dwrapper = shallow({amp}lt;SignIn store={store}/{amp}gt;).dive(); expect(dwrapper.find(".contentWrapper").exists()).toBeTruthy(); }); }); 
Бинод

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,