如何用酶测试输入onChange事件？
酶（Enzyme）是一款用于React应用程序的JavaScript测试工具。它提供了一组简洁且强大的API，用于模拟React组件的行为，方便开发人员编写单元测试、集成测试和端到端测试。
要测试一个输入框的onChange事件，可以按照以下步骤使用酶进行测试：
- 安装酶库：在项目中使用npm或yarn命令安装酶库。
- 安装酶库：在项目中使用npm或yarn命令安装酶库。
- 配置适配器：根据你的React版本选择并配置相应的适配器。例如，如果你使用的是React 16，可以使用enzyme-adapter-react-16。
- 配置适配器：根据你的React版本选择并配置相应的适配器。例如，如果你使用的是React 16，可以使用enzyme-adapter-react-16。
- 编写测试用例：使用酶的API编写测试用例。首先，需要使用shallow方法来浅渲染一个组件，并模拟事件触发。
- 编写测试用例：使用酶的API编写测试用例。首先，需要使用shallow方法来浅渲染一个组件，并模拟事件触发。
- 在这个例子中，我们首先使用shallow方法浅渲染MyComponent组件，并找到其中的输入框。然后，使用simulate方法模拟change事件，并传递一个包含新值的事件对象。
- 运行测试：在命令行中运行测试命令，检查测试结果是否符合预期。
- 运行测试：在命令行中运行测试命令，检查测试结果是否符合预期。
以上是使用酶进行测试输入onChange事件的基本步骤。通过这种方式，你可以编写更多的测试用例来验证组件在不同输入情况下的行为和状态变化。
对于推荐的腾讯云产品和产品介绍链接地址，请您自行参考腾讯云官方文档。
相关·内容
1回答
textInputStyles["text-input__error-message"] }>{ errorMessage }</p> </div>}; 现在我不会测试onChange是否正常工作，我是这样做的： test("TextInput: should change value", () => { o
浏览 14提问于2019-05-31得票数 0
我有一个丰富的文本编辑器输入字段，我想用一个已弹出的组件包装。已取消的输入组件如下所示：import debounce from 'lodash.debounce';具有MediumEditor的父组件有一个应该从DebounceInput组件调用的方法onTextChange，因为它是作为onChange支柱传递给DebounceInput，的函数，但是在测试中，在浏览器中，一切都很好，
浏览 0提问于2021-01-03得票数 5
2回答
我隐藏一个文件输入元素(<input type="file"/>)“后面”一个反应引导Button，以便能够控制样式。因此，当单击按钮时，我转过身，在文本输入元素上触发一个合成单击事件，如下所示。click(); return ( <div>
<input type="file" onChangeonClick={
浏览 7提问于2017-03-04得票数 2
回答已采纳
有人能告诉我如何测试这个简单的行为吗?我已经尝试了很长时间来解决这个问题，我希望我只是遗漏了一些东西，因为更改事件应该很容易测试。我尝试调用onChange而不是simulate，wrapper.update()，await new Promise(resolve => setTimeout(resolve))没有结果。={jest.fn()}> <Field name="name">
{({input}) => &l
浏览 1提问于2019-07-24得票数 3
2回答
我正在尝试使用enzyme和jest测试我的组件的onChange事件。={input.onChange} onBlur={input.onBlur} const onChange = jest.fn(); label: 'Test
浏览 25提问于2019-04-24得票数 4
回答已采纳
我如何用酶写一个测试呢？<LabeledInput onChange={this.props.onChange}onBlur={() => this.props.onBlur('zip')}beforeEach(() => { onChangesinon.
浏览 2提问于2019-05-23得票数 0
1回答
我正试图对一个部件做一个酶/玩笑单元测试。我需要模拟特定子组件的更改事件(因为其中有两个)。wrapper.instance().state但这不是找到两个输入组件的正确方法_onSubmit.bind(this)}> value={this.state.description}
浏览 0提问于2017-11-07得票数 0
回答已采纳
1回答
我想测试组件中的Select组件是否正确地调用了我的onChange和onBlur处理程序。我使用jest作为我的测试框架，使用enzyme来呈现用于测试的组件。rest} = props {...rest} onChange={onChange} />)测试
describe('MyComponent
浏览 2提问于2017-06-16得票数 1
我目前正在使用Jest和酶测试React TextArea组件。这个组件基本上只是一个原生<textarea>元素的包装器。它的行为是根据其相对于设置的max-height的当前值自动调整其高度。这是onchange事件处理程序： const { onChange } = this.props;
const field = e.target'scroll' : 'hidden';
浏览 15提问于2019-12-02得票数 1
1回答
我已经创建了一个作为自动保存输入字段的react组件。预期的行为是：
break } /> }用Jest或酶测试blur事件很简单，但是我在测试<
浏览 6提问于2017-11-19得票数 0
我试图在输入字段中添加两个事件，如onkeyup和onchange，目的是避免长按numbers..as以外的字符。目前只有一个事件在工作，要么是keypress，要么是onchange。isnum)}//onchange var code = obj.value;" data-validate="
浏览 1提问于2014-02-06得票数 1
除了使用jest中的快照之外，我还在为如何测试React Native组件而苦苦挣扎。这些对于基于传递到组件中的一些数据来测试某些东西的外观非常有用，但是似乎没有一种方法来测试事件或事件处理程序，检查事件侦听器在生命周期方法中是否正确设置或断开，etc...like感觉要么我遗漏了什么，另外，快照测试在测试驱动开发方面感觉是倒退的，因为只有当你有了应用程序code...any的想法时，你才能编写测试？
浏览 7提问于2017-01-11得票数 0
我已经创建了一个react应用程序，它在父组件中具有所有的逻辑(如onchange函数)，在子组件中具有所有的html呈现。为了测试是否发生了正确的状态更改，我必须在输入字段中输入文本并输入值，但唯一的问题是，当我在js中挂载父元素时，我不知道如何访问子元素。我应该将逻辑转移到子组件中，还是应该只对父组件的功能进行单元测试？ render() {
if (!"} _onChange={props._on
浏览 0提问于2016-09-09得票数 0
1回答
我正在使用输入的类型文件打开文件，并触发一个函数的变化，如这样。<input type="file" multiple="multiple" class="fileUpload"var vm = this;vm.fileOpened = fileOpened
浏览 2提问于2017-03-30得票数 0
回答已采纳
2回答
并希望使用Jest、酶和sinon测试输入onChange事件。测试'if the value is displayed on input change‘失败。items-center"> id="username"
valu
浏览 1提问于2019-05-12得票数 0
2回答
我想分别模拟按钮和选取器的onclick和onchange事件。我可以模拟onclick按钮。simulate("click");有关完整代码和测试文件
浏览 3提问于2021-05-25得票数 2
是否可以在Modal中使用document.querySelector测试onChange事件 对react js文件使用jest和酶 <Modal isOpen={this.state.quickFilterModalOpenadvanced-search-modal-inner'> <input id='first-name-filter'on
浏览 29提问于2019-04-27得票数 0
我正在尝试为多个onChange事件运行测试。测试现在通过了以下代码，但不影响它的覆盖率，这意味着不正确 wrapper.find('Datasubjects').props().onChange({City:{target:{value:'testonChange事件： <Modal isOpen={this.state.quickFilterModalOpen} style={descriptionModalStyle}>
浏览 17提问于2019-03-29得票数 4
回答已采纳
2回答
我编写了一个绑定到input元素的input事件的处理程序方法，它接受两个参数 <InputText id="title" onChange={e =>
this.handleInputObject.assign({},
浏览 0提问于2020-03-02得票数 1
回答已采纳
1回答
免责声明:我使用Preact作为库，使用enzyme-adapter-preact-pure作为酶的适配器。this.handleInputChange = handleInputChange.bind(this); return <input name="name" onChange={this.handleInputChange} />;}由于我依赖于event.targe
浏览 0提问于2019-05-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
