第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用 Enzyme 觸發(fā)模糊事件來更改輸入元素的值？

如何使用 Enzyme 觸發(fā)模糊事件來更改輸入元素的值？

絕地?zé)o雙 2023-07-14 10:44:25
我想為輸入表單編寫測(cè)試，但無法觸發(fā) Blur 事件。我有一個(gè)包含以下輸入元素的反應(yīng)組件：<input  id='email'  onBlur={this.handleInputChange}  name='email'  type='text'/>我還在email狀態(tài)中定義了一個(gè)設(shè)置狀態(tài)的函數(shù)：  handleInputChange = (event) => {    this.setState({ email: event.target.value });  };我的測(cè)試文件中有以下內(nèi)容：    const inputs = component.find('input');    expect(inputs.length).toEqual(2);                             // test case passes    inputs.at(0).simulate('blur', { target: { value: 'abc@hello' } });    expect(inputs.at(0).props().value).toEqual('abc@hello');      //test fails如果我嘗試模擬更改事件，測(cè)試也會(huì)失?。?inputs.at(0).simulate('change', { target: { value: 23 } });在這兩種情況下，我都會(huì)收到錯(cuò)誤：    Expected: "abc@hello"    Received: undefined看來我的代碼沒有觸發(fā)該事件。誰能告訴我我做錯(cuò)了什么
查看完整描述

3 回答

?
尚方寶劍之說

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊

當(dāng)您的組件設(shè)置狀態(tài)的電子郵件屬性時(shí)。您可以檢查組件的狀態(tài)，例如：

expect(component.state().email).toEqual('abc@hello');


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊

嘗試這個(gè)方法，


成分


import React, { Component } from "react";


export class YourComponent extends Component {

  state = {email: ''};


  handleInputChange = (event) => {

    this.setState({ email: event.target.value });

  };

   

  render() {

    return (

      <input

        id='email'

        onBlur={this.handleInputChange}

        name='email'

        type='text'

        value={this.state.email}

      />

    );

  }

}

 export default YourComponent;

測(cè)試文件


    describe("Blur test", () => {

      it("input component", () => {

        const component = mount(<YourComponent />);

        let inputs = component.find('input');

        const inputValue =  'abc@hello';

        inputs.at(0).simulate('blur', { target: { value: inputValue } });

    

        inputs = component.find('input');

        console.log(inputs.debug());// you will get updated value here

        expect(inputs.props().value).toEqual(inputValue);

      });

    });


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊

您在測(cè)試中引用了props().value，而輸入元素沒有這樣的屬性。所以你需要value在輸入中添加 prop


<input

  id='email'

  onBlur={this.handleInputChange}

  name='email'

  type='text'

  value={this.state.email}

/>

為了測(cè)試預(yù)期的 props 值，您需要強(qiáng)制重新渲染組件以反映新值。在 中Enzyme，我們可以通過使用 來做到這一點(diǎn)wrapper.setProps({})。您可以傳遞所需的值wrapper.setProps({value: 'abc@hello'})或只是一個(gè)空對(duì)象，此處的目的是導(dǎo)致重新渲染。


const inputs = component.find('input');


expect(inputs.length).toEqual(2);  // test case passes

inputs.at(0).simulate('blur', { target: { value: 'abc@hello' } });


// setProps should be called on the shallow or root wrapper.

component.setProps({}); // cause rerender.

expect(inputs.at(0).props().value).toEqual('abc@hello');  // test should pass  


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 3 回答
  • 0 關(guān)注
  • 234 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)