首頁猿問如何使用 Enzyme...

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

JavaScript

絕地無雙 2023-07-14 10:44:25

我想為輸入表單編寫測試，但無法觸發 Blur 事件。我有一個包含以下輸入元素的反應組件：<input id='email' onBlur={this.handleInputChange} name='email' type='text'/>我還在email狀態中定義了一個設置狀態的函數： handleInputChange = (event) => { this.setState({ email: event.target.value }); };我的測試文件中有以下內容： 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如果我嘗試模擬更改事件，測試也會失敗： inputs.at(0).simulate('change', { target: { value: 23 } });在這兩種情況下，我都會收到錯誤： Expected: "abc@hello" Received: undefined看來我的代碼沒有觸發該事件。誰能告訴我我做錯了什么

查看完整描述

3 回答

尚方寶劍之說

TA貢獻1788條經驗獲得超4個贊

當您的組件設置狀態的電子郵件屬性時。您可以檢查組件的狀態，例如：

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

反對回復 2023-07-14

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

嘗試這個方法，

成分

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;

測試文件

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);

});

反對回復 2023-07-14

HUX布斯

TA貢獻1876條經驗獲得超6個贊

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

<input

id='email'

onBlur={this.handleInputChange}

name='email'

type='text'

value={this.state.email}

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

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

反對回復 2023-07-14

3 回答
0 關注
198 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答