シミュレーションをクリック

Question

Reactアプリケーションをテストするために酵素ツールに問題があります。

私のコンポーネントではログインフォームがあり、ボタンをクリックした後にpタグがテキストで埋められるかどうかをテストしたいと思います。

実際に送信をクリックすると、現在存在しないapiにリクエストが送信され、到達不能なエンドポイントに関するエラーが返されます。

多くの方法でテストしようとしましたが、面白いことに気付きました。使用方法：

it('returns error if endpoint not reachable',() => { 
    const wrapper = mount(<LoginForm dispatch={dispatch} store={store} />); 
    wrapper.find('button').simulate('click'); 
    console.log(wrapper.debug()); 
    }); 

はコンソールにHTMLコードを返します。しかし、pタグも埋められていません。だから私の質問は、ここでシミュレーション関数を使用する方法です？

初めてタイムアウトが発生したと思われました。しかし、setTimeoutを使用すると同じ結果が得られます。

ありがとうございました！

Answer 1

酵素は、クリック事象を提出する能力を与える。それがうまくいかない場合は、適切な要素が選択されているかどうか不思議です。だからあなたの特定のケースでは、あなたがAPI呼び出しを述べた

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { count: 0 }; 
    } 
    render() { 
    const { count } = this.state; 
    return (
     <div> 
     <div className={`clicks-${count}`}> 
      {count} clicks 
     </div> 
     <a href="url" onClick={() => { this.setState({ count: count + 1 }); }}> 
      Increment 
     </a> 
     </div> 
    ); 
    } 
} 

const wrapper = shallow(<Foo />); 

expect(wrapper.find('.clicks-0').length).to.equal(1); 
wrapper.find('a').simulate('click'); 
expect(wrapper.find('.clicks-1').length).to.equal(1); 

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/simulate.md#example

ドキュメントからの例では、... [送信]ボタンをクリックした後に行われます。 Sinonのようなものを使用してこの動作を分離し、模擬する必要があります。

http://sinonjs.org/