方法“simulate”意味着在1个节点上运行。而是找到0。jest/酶
方法"simulate"是React测试库中的一个方法，用于模拟组件的交互行为。它可以在单个节点上模拟事件触发，以便测试组件的响应。
使用"simulate"方法，可以模拟用户在组件上执行的各种操作，例如点击、输入、拖拽等。通过模拟这些操作，可以测试组件在不同交互情况下的行为和状态变化。
"simulate"方法的语法如下：
wrapper.find(selector).simulate(event[, ...args])其中，"wrapper"是组件的测试包装器，"selector"是用于选择组件中的节点的选择器，"event"是要模拟的事件名称，"...args"是传递给事件处理函数的参数。
"simulate"方法的优势在于可以方便地测试组件的交互行为，而无需实际触发真实的事件。这样可以提高测试的效率和稳定性，并且可以覆盖各种交互情况，以确保组件的正确性。
应用场景：
- 测试表单组件：可以使用"simulate"方法模拟用户在表单中输入、提交等操作，以测试表单的验证、提交等功能。
- 测试按钮组件：可以使用"simulate"方法模拟用户点击按钮，以测试按钮的点击事件处理函数是否正确执行。
- 测试交互组件：可以使用"simulate"方法模拟用户在交互组件上的各种操作，以测试组件的交互行为和状态变化。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/mtv
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。
相关·内容
1回答
我有一个容器组件，负责为子表单组件方法提供保存功能。我试着用Jest &酵素(我想我需要酶？)若要测试子组件是否触发从父组件传递的函数，请执行以下操作。这两种方法如下所示：
class Parent extends Component {
handleSave = (someData) => (
/* do some ajax with someData */
)
render() {
return(
<ChildComponent {...this.props} handleSave={this.handleSave} />
浏览 0提问于2016-12-09得票数 1
我正试着用Jest和酶来测试反应组分。我想模拟Button组件上的单击事件，该组件位于具有特定类名的div中。我无法检索按钮节点。
组件中有以下标记
<div className="settings">
<Button
onClick={() => this.toggleSettingsModal(true)}
buttonStyle={ButtonStyle.Primary}>
Settings
</Button>
</div>
我试过了
const comp
浏览 0提问于2019-04-01得票数 0
回答已采纳
我正在使用酶+ jest来测试react，是否有可能在contetnteditable元素上触发onKeyDown事件？
<span id = 'name' contenteditable = 'true'> Editable text </span>
我试过：
result.find('#name').simulate('keyDown', { key: 'm', keyCode: 77, which: 77 });,
但这不起作用。元素含量保持不变。
浏览 3提问于2017-05-03得票数 1
我实现了类似于提供的示例。我在访问avatar={}中的复选框时遇到了问题。这个项目正在使用Jest/酶进行测试。为了简单起见，下面的示例是直接从他们的文档中添加的id。我在想要测试的东西中添加了ids，以便更容易地使用.find函数。
export interface IListItem {
itemId: number;
itemName: string;
isChecked: boolean;
}
interface IProps {
listName: string;
list: IListItem[];
setList: any;
}
func
浏览 1提问于2020-07-06得票数 1
回答已采纳
1回答
酶浅找不到反应自举组分
、、、
下面是使用Redux-forms生成的React组件中的一个标志
const renderInput = ({input,label,type,placeholder}) => {
return (
<div>
<Form.Label>{label}</Form.Label>
<Form.Control type={type} placeholder={placeholder} { ...input}/>
</div>
)
}
export let signInForm = prop
浏览 1提问于2019-03-06得票数 0
我正在用TypeScript构建一个。我在用Jest和酶做成分测试。我也在使用React导航
我很难写单元测试来点击我的按钮。
以下是组件的代码(只是呈现函数)：
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<Button
raised
title={strings.painButtonTitle}
buttonStyle={styles.p
浏览 0提问于2018-10-07得票数 7
回答已采纳
2回答
我正在建立一个应用程序与反应。我隐藏一个文件输入元素(<input type="file"/>)“后面”一个反应引导Button，以便能够控制样式。因此，当单击按钮时，我转过身，在文本输入元素上触发一个合成单击事件，如下所示。
class OpenFileButton extends React.Component {
...
clickHandler() {
this.refs['input'].click();
}
render() {
return (
<ButtonGroup>
浏览 7提问于2017-03-04得票数 2
回答已采纳
1回答
正在尝试运行以下代码的测试，但找不到节点.Using jest和ReactJS的酶 render () {
return (
this.state.permissionsLoaded ?
this.state.localPermissions[globals.UI_DATASOURCEDESIGNER] ?
this.state.datasourcePermissionsLoaded ?
this.state.allowCurrentDatasource ?
<div>
<Modal isOpen={this.state.add
浏览 15提问于2019-04-11得票数 0
回答已采纳
I试图在Formik 'resetForm'.上运行单元测试(酶)抛出错误
TypeError:无法读取未定义的属性“resetForm”
FormikForm.js
_handleSubmitPress = (values, { resetForm }) => {
const { onSubmit } = this.props;
if (onSubmit) {
onSubmit({ ...values, resetForm });
}
};
UnitTest.js:
it('S
浏览 8提问于2020-11-21得票数 0
回答已采纳
2回答
在react中，当你有一个带有onClick属性的元素时，很容易使用酶的.simulate("click")方法来点击它。但是，在我的代码库中有一个示例，其中React的"ref“prop引用了一个元素，然后调用该元素的.addEventListener将事件处理程序绑定到该元素。 我提供了一个代码示例：https://codesandbox.io/s/1z4xok048j 关键的一行是： if (this.refs.hey) {
this.refs.hey.addEventListener("click", this.handleClick);
浏览 36提问于2019-02-14得票数 3
我有onClick函数
private onClick(e: React.MouseEvent<HTMLButtonElement>) {
if (e) {
this.props.log();
}
}
如果onClick有一个事件，我如何使用jest和酶进行测试
it("should not log if has mouse event", () => {
const onClickSpy = jest.fn();
const logSpy = jest.fn();
浏览 3提问于2018-06-19得票数 1
1回答
我能够在这个文件上测试一些onClick事件，但是当涉及到下面的代码时，我无法进行测试。我相信的主要原因是因为呈现中有一个类，我无法测试它
我试着用className，id等进行测试。但还是会犯同样的错误。
使用jest和酶反应JS
下面是我正在尝试测试的onClick事件：
<div className='report-wrapper'>
<div className='fields-item-wrapper span-two-col'>
<label className=&
浏览 0提问于2019-02-26得票数 0
回答已采纳
3回答
无法通过下列测试:使用React /酶法和jest
我已经问了一个类似的问题，并试图应用同样的方法，但它没有通过。有什么原因吗？替代浅水=坐骑？或者增加一个潜水()？
file.test.js -
// jest mock functions (mocks this.props.func)
const updateSelectedFormJSON = jest.fn();
const closeModal = jest.fn();
const onClick = jest.fn();
const onSaveClick = jest.fn();
// defining this.p
浏览 0提问于2019-02-14得票数 4
我有一个函数组件，它有一个handleKeyDown函数： const handleKeyDown = () => {
if (e.key === 'Backspace') {
e.nativeEvent.stopImmediatePropagation()
}
}
return (
<input onKeyDown={handleKeyDown} //etc />
) 如何测试e.nativeEvent.stopImmediatePropagation被调用时的退格键？ 我使用的是酶/反应测试库和jest。 任何指导都将不胜
浏览 53提问于2021-07-29得票数 0
回答已采纳
我有一个反应条形图。在barClick上，页面重定向到不同的url。如何使用酶/Jest测试此单击事件？
const handleClick = (params) => {
if(params.data){
let url = get_route(params.value[2])
window.open(url, "_self")
}
return null
};
let onEvents = {'click': handleClick};
<ReactEcharts
option={this.g
浏览 0提问于2020-08-18得票数 0
1回答
我正在尝试用Jest和酶来测试我实现的拾取器的onValueChange，我不确定我这样做的方式是否正确。
我的组件：
const ManufacturersPicker = ({
Manufacturers,
ManufacturersPickerOnValueChange,
selectedManufacturerId,
}) => {
const ManufacturersPickerItems = [];
ManufacturersPickerItems.push(Manufacturers.map(item => (
<Picker.I
浏览 10提问于2018-02-20得票数 0
回答已采纳
1回答
尝试测试以下单击事件:为ReactJS使用Jest和酶 <Modal isOpen={this.state.descriptionModalOpen} style={descriptionModalStyle}>
<div>
<div className='fullmodal'>
<div className="fullmodal_title">
<div className="fullmodal_title_add">Description</div&
浏览 19提问于2019-04-02得票数 1
回答已采纳
我目前正在尝试使用jest和酶来测试“onOk”和“onCancel”方法： Modal.confirm({
title: 'Role Change',
content: `Change?`,
okText: 'Change',
onOk: method1,
onCancel: method2
}) 这是在组件中调用的帮助器方法中。我试着等待组件更新，然后查询OK按钮，但酶似乎找不到它。当我在组件上执行debug()时，模态也没有出现。有没有一种很好的方法来监视这些方法，甚至一开始就调用它们？谢谢!
浏览 29提问于2020-07-02得票数 3
在酶中，模拟点击className找到的项目似乎不起作用。问题是mockFn没有模仿toggleSort。但在其他情况下，以这种方式模拟函数可以完美地工作。为什么酶处理mocking类函数的方式不一致？下面所有用于测试事件处理程序toggleSort的情况都不起作用。 import React from "react";
export default class Hello extends React.Component {
toggleSort = e => {
console.log(e, "dd");
};
render()
浏览 24提问于2019-05-01得票数 1
我正在使用酶/Jest来为我的组件上的一个函数编写一个测试，这个测试是通过一个材料菜单图标的onClick触发的。函数作为道具传递给组件。在编写测试时，它会给我模拟点击的错误。
import React from 'react';
import scssstyles from './ToggleSideNavComponent.scss';
class ToggleSideNavComponent extends React.Component {
render() {
return (
<
浏览 0提问于2018-05-10得票数 0
我正在开发一个使用类型记录和钩子的反作用应用程序，我正在尝试用酶和Jest测试功能组件。我无法使用jest.spyOn测试组件中的方法。jest.spyOn方法无法正确解析，并在悬停时显示以下消息
“类型‘’validateBeforeSave‘的参数不能分配给’‘上下文’、‘setState’、‘setState’、‘forceUpdate’、‘呈现’、‘componentDidMount’、‘shouldComponentUpdate’、‘shouldComponentUpdate’、‘componentWillUnmount’、‘componentDidCatch’、‘componen
浏览 0提问于2019-05-24得票数 10
回答已采纳
我正在测试与酶和Jest反应的天然成分。我已经能够测试是否调用了模拟函数(在本例中为Alert.alert)，如下所示：
Alert.alert = jest.fn();
someButton.simulate('Press');
expect(Alert.alert.mock.calls.length).toBe(1);
这种方法运作得很好。
无论如何，我有一个登录按钮，它启动一个获取。我的提取函数是这样的：
fetch(ipAddress, {
...
})
.then(response => respo
浏览 0提问于2018-02-25得票数 1
回答已采纳
1回答
我正在尝试学习酶+ Jest反应组分的测试，我在酶中使用.find方法时出错了。
误差
Method “simulate” is meant to be run on 1 node. 0 found instead.
19 | onAddNew={onAddNew} />);
20 |
> 21 | component.find('button.btn-primary').simulate('click');
|
浏览 0提问于2019-02-03得票数 1
回答已采纳
我对前端开发非常陌生&我在使用Shallow进行酶单元测试时遇到了一些麻烦。基本上，我有像这样的东西
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const {
handleClick,
...other
} = this.props;
return (
浏览 14提问于2019-07-12得票数 2
回答已采纳
我想用jest和酶测试输入字段。
test('Filter Test', async () => {
const setFilter = jest.fn();
const bar = mount(
<TestWrapper>
<SearchAndFilterBar textFilters={textFilters} filterButtons={filterButtons} setFilterQuery={setFilter} />
</TestWrapper>,
)
浏览 3提问于2020-01-08得票数 0
回答已采纳
1回答
使用JEST JS和酶编写单元测试。代码有几个值设置为不同状态的select类。 例如:我能够找到以下内容： <Select
disabled={disabled}
className={showRequired(checkRequired, this.state.AccountStatus, 'value') ? 'account-select req' : 'account-select'}
id='custodian-status'
value={this.state.AccountStatu
浏览 7提问于2019-04-16得票数 1
我正在使用酶类/Jest编写容器帽子上函数的测试，这个测试是通过复选框组件的onChange触发的。我试图模拟一个“更改”，然而，不知怎么的，“更改”并没有触发要调用的onChange函数。不知道这是怎么回事..。我尝试将模拟更改为“单击”，删除目标对象，但仍然无法工作。
容器
export class Data extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data_list_api: [],
selected_data: this.
浏览 3提问于2017-07-19得票数 5
回答已采纳
1回答
仅使用Jest的单元测试链接
、、、、
我想知道是否有办法单独使用jest进行单元测试链接，以确保它们到达正确的位置。我查到的所有其他资源都使用了酶或其他应用程序。
例如:确保<Link to '/homepage>或<NavLink to '/homepage'>真正进入主页。
任何需要阅读的额外资源也将是有益的和值得赞赏的。
浏览 14提问于2021-12-30得票数 1
1回答
在jest和酶中。如何找到所有元素的数量(孩子，孩子的孩子等)内部包装器。wrapper.children().length仅输出包装器的直接子项
浏览 12提问于2020-05-01得票数 0
回答已采纳
我是react redux的新手，我正在尝试对FormContainer组件进行单元测试。但我无法使用酶或jest来模拟表单组件上的更改事件。在wrapper.instance()中，我收到了null，但我认为这不应该发生。如果不是，那么测试FormContainer.js文件的正确方法是什么，因为当我运行测试覆盖率时，它向我显示更改函数已被发现。
FormContainer.js
import React, { Component } from "react";
import { connect } from "react-redux";
import For
浏览 0提问于2019-08-12得票数 0
我有一个函数handleClick，它在一个元素上使用scrollBy，该元素使用getBoundingClientRect获取它的第一个参数。我正在尝试使用jest/酶来测试它。 class myClass extends Component {
...
...
handleClick () {
document.getElementById('first-id').scrollBy(document.getElementById('second-id').getBoundingClientRect().width,
浏览 38提问于2019-04-24得票数 4
回答已采纳
我有一个模拟点击的小测试(希望用这个测试做更多的事情，但到目前为止我还停留在这里)：
import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import HamburgerIcon from './HamburgerIcon';
Enzyme.configure({ adapter: new Adapter() });
test('hamburge
浏览 1提问于2019-06-01得票数 2
回答已采纳
1回答
我正在使用Jest和酶来测试React复选框组件。
这是我的考验：
it('triggers checkbox onChange event', () => {
const configs = {
default: true,
label: 'My Label',
element: 'myElement',
}
const checkbox = shallow(
<CheckBox
configs={configs}
/>
)
checkbox.find(&
浏览 1提问于2017-05-11得票数 24
回答已采纳
我是新手反应，我需要一个帮助为Redux表单组件"onSubmitSuccess“编写测试用例，以下是代码 reduxForm({ form: "AddTagForm",
enableReinitialize: true,
onSubmitSuccess: afterSubmit })
callback function,
export const afterSubmit = (dispatch) => dispatch(reset("AddTagForm")); 我需要一个帮助来编写afterSubmit方法的测试用例。请帮帮忙
浏览 26提问于2019-10-16得票数 0
1回答
我试图模拟点击按钮，但测试总是失败，我不知道为什么。看来酶无法选择DOM元素来触发对它的单击，因为调用总是0。我用的是酶3.7.0和jest 23.6.0
Button.tsx
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
rende
浏览 0提问于2018-10-10得票数 1
回答已采纳
1回答
我试过了：
input.simulate('blur');
和
input.simulate('onBlur');
这些都不起作用。这在酶中是可用的吗(我使用的是2.4.1版)。
浏览 0提问于2016-08-16得票数 23
回答已采纳
我试图模拟一个keyDown事件，特别是Enter，keyCode: 13。我尝试过很多不同的方法，但是没有一种方法有效。我也在网上看过了，看起来这个特性要么是错误的，要么在当前版本的酶中不起作用。是否有人确切地知道此特性是否有效，如果是，那么模拟enter或其他类型的关键事件的正确语法是什么？谢谢!
这是我目前的情况，但不起作用：
const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});
我现在的酶版本是2.4.1
浏览 4提问于2016-08-15得票数 59
回答已采纳
1回答
我是使用Jest进行测试的新手，需要模拟一个click事件。我已经能够用酶css选择器选择元素并触发事件，但测试仍然失败，表明我还没有运行函数。 Test:
it('test',() => {
const e = { target: {id:'X'} }
const click = jest.fn();
let wrapper = shallow(<GameBoard onClick={click}/>);
let test = wrapper.find("#gameBoard").childAt(0)
浏览 19提问于2019-05-06得票数 1
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给Popover的页脚属性的Button触发单击
const React, {Component} from 'react';
const {Popover, Button} from 'slds'; // Any UI library
class My Component extends Component {
render() {
return(
<Popover
footer={
浏览 0提问于2019-08-27得票数 1
是否有义务用Jest和酶来模拟useState钩子？因为对于一个简单的组件来说，这是很复杂的。
酶的simulate函数在这种情况下有效吗？
浏览 4提问于2022-01-02得票数 1
回答已采纳
2回答
在子组件上触发单击事件
、、、
我一直在尝试编写一个测试，以确保当一个标记被点击时(从传单)将显示给用户更多的细节。Marker组件是Map组件的子组件。首先，我只想看看在单击标记时是否只调用了一次onClick函数。
Map组件返回以下结构
return(
<LeafletMap>
<Marker data-testid='marker' onClick={someFunc}/>
<TileLayer/>
<Popup/>
</LeafletMap>
)
在我的测试中，我尝试呈现Map组件并通过data-testid
浏览 0提问于2020-02-20得票数 1
回答已采纳
2回答
有人知道如何用Jest/酶测试AgGridReact吗？我正在尝试模拟应该自动调用的onGridReady回调，但它似乎没有触发。以下是我的测试的简化版本：
import React from "react";
import { mount} from "enzyme";
const AgGridReact =
typeof window === "undefined"
? () => null
: require("ag-grid-react").AgGridReact;
var spy = jes
浏览 4提问于2018-02-22得票数 4
1回答
如何测试回调参数
、、、、
我有一个react本机组件，它看起来像：
export class Estimate extends PureComponent {
setRef =
(ref) => {
this.estimateForm = ref
}
render () {
const { onPress } = this.props
return (
<Form
name="estimateForm"
ref={this.setRef}
>
<Actio
浏览 0提问于2018-09-24得票数 0
回答已采纳
我正在尝试用jest和酶来模拟一次点击，而且我对react的测试库还是个新手。
我的组件正在使用Material UI。
下面是我想要测试的代码部分：
<div>
<Typography className={classes.instructions}>
All steps completed - you're finished
</Typography>
浏览 0提问于2020-08-13得票数 0
1回答
我正在尝试编写一个测试，它使用酶来模拟按钮单击，该按钮期望onClick处理程序被触发。我想用模拟替换组件的onClick处理程序。当测试运行时，将调用组件类方法而不是模拟函数。如有任何指导，将不胜感激！
下面是测试输出：
FAIL src/Form.test.js
● Console
console.log src/Form.js:5
this is from the component
● Submit handler called on click
expect(jest.fn()).toHaveBeenCalled()
Expe
浏览 1提问于2020-02-09得票数 1
回答已采纳
2回答
我正在学习使用钩子的reactjs表单，现在我想使用jest和酶测试表单提交。
这是我的登录组件。
import React from 'react'
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
// ...
浏览 5提问于2020-11-13得票数 1
回答已采纳
我有一个可点击的组件，如下所示：
export default class Clickable extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('clicked');
}
render(){
return <button onClick={this.handleClick}></button&
浏览 1提问于2017-11-07得票数 2
我用的是React v15.4，babel-jest v18和酵素v2.5.1
我有一个简单的反应组件：
import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'
class About extends Component {
浏览 6提问于2017-03-28得票数 16
回答已采纳
单元测试返回错误，但当我启动我的应用程序时，一切正常。
问题是，当箭头函数中的callOnSubmitWithData()作为onPress回调返回时，模拟的onSubmit函数不会被调用，但在启动的应用程序中一切正常。
Jest中的单元测试和酶：
const setup = (propOverrides) => {
const props = Object.assign({
fields: [],
error: '',
onSubmit() {}
}, propOverrides);
const wrapper = shallow(
<F
浏览 2提问于2018-06-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
