Состояние не определено при имитации щелчка в ответе на компонентный компонент

Question

Я пытаюсь проверить поведение моего метода handleFormSubmit(). Когда нажата кнопка отправки, вызов должен быть запущен. Это работает абсолютно нормально, пока я не добавлю две строки, перечисленные ниже. Кажется, фермент обновляет контекст или не вызывает конструктор?

Любая помощь, очень ценится. Я убрал все, что мог, чтобы оставить сообщение кратким.

Линии, которые не - состояние не определено

data.username = this.state.username.trim(); 
data.password = this.state.password.trim(); 

Компонент:

импорта React из 'реагируют'; Тест

// Renders login form. 
export default class LoginView extends React.Component { 
    static propTypes = { 
    model: React.PropTypes.object.isRequired, 
    params: React.PropTypes.object.isRequired 
    } 

    constructor(props) { 
    super(props); 
    this.state = { 
     username: '', 
     password: '' 
    }; 
    } 

    handleUsernameChange(event) { 
    this.setState({error: false, username: event.target.value}); 
    } 

    handlePasswordChange(event) { 
    this.setState({error: false, password: event.target.value}); 
    } 

    handleFormSubmit(event) { 
    event.preventDefault(); 

    let failureMsg = {}, 
     data = this.props.params, 
     options = { 
     success: (response) => { 
      if (response.attributes.successfulLogin) { 
      window.location = this.props.params.redirect + 
       '?authenticationToken=' + response.get('authenticationToken') + 
       this.createParams(); 
      } else { 
      throw Error('Helpful error'); 
      } 
     }, 
     error:() => { 
      throw Error('Helpful error'); 
     } 
     }; 

    // PROBLEM LINES! 
    data.username = this.state.username.trim(); 
    data.password = this.state.password.trim(); 

    if (this.state.username && this.state.password && this.state.terms) { 
     this.props.model.save(data, options); 
    } else { 
     this.setState({ 
     error: true, 
     errorMessage: !this.state.username || !this.state.password ? LoginConstants.LOGIN.BLANK_INPUT : LoginConstants.LOGIN.BLANK_TERMS 
     }); 
    } 
    } 

    render() { 
    return (
     <form> 
     <input type="text" ref="username" id="username" placeholder="Customer ID" onChange={this.handleUsernameChange.bind(this)} maxLength={75} value={this.state.username} /> 
     <input type="password" ref="password" id="password" placeholder="Password" onChange={this.handlePasswordChange.bind(this)} maxLength={75} value={this.state.password} /> 
     <button type="submit" ref="login" id="login" className="Button Button--primary u-marginT-md" onClick={this.handleFormSubmit.bind(this)}>LOGIN</button> 
     </form> 
    ); 
    } 
} 

Единица измерения:

import React from 'react'; 
    import { mount } from 'enzyme'; 
    import LoginView from './LoginView'; 

    describe('Login screen',() => { 
    let mountedComp; 

    beforeAll(() => { 
     mountedComp = mount(<LoginView />); 
    }); 

    it('should show error if submitted blank',() => { 
     mountedComp.instance().state = { 
     username: '', 
     password: '' 
     }; 

     expect(mountedComp.find('#js-errorMessage').length).toEqual(0); 
     mountedComp.ref('login').simulate('click', { preventDefault:() => undefined, state: {} }); 
     expect(mountedComp.find('#js-errorMessage').length).toBeGreaterThan(0); 
    }); 
    }); 

Answer 1

мне удалось обойти эту проблему, передавая мой Params вручную мой объект JSX. Я не уверен, что это правильный способ протестировать, но теперь это сработало.

<LoginView model={model} params={params} /> 

Answer 2

Похоже, ваш «this.state: выходит за рамки рассмотреть добавление

var _self = this; 

и использовать

_self.state.username.trim(); 
_self.state.password.trim(); 

Answer 3

попробовать связывание. ваша функция onClick в <form onClick={this.handleFormSubmit.bind(this)} >

Answer 4

Я считаю, что источник проблемы может лежать в этой самой линии:

let data = this.props.params 

В JavaScript не будет копировать this.props.params объект data объекта по значению, но по ссылке. Он установит ту же ссылку для data и this.props.params - это означает, что если вы измените содержимое data, оно будет отражено в this.props.params и наоборот. Итак, вы на самом деле мутируете props, которые должны быть неизменными.

Вы должны скорее создать мелкую копию, например. как то:

let data = Object.assign({}, this.props.params)