gpt4 book ai didi

javascript - React 测试事件冒泡

转载 作者:行者123 更新时间:2023-11-29 22:44:27 25 4
gpt4 key购买 nike

是否可以在 React 中测试事件冒泡?

例如:

Class Foo extends React.Component {
doSmth() {
console.log('bubble');
}

render() {
return (
<div onClick={this.doSmth}>
<Bar />
</div>
);
}
}

我有一个父组件和一个子组件。 Click 事件在 Bar 组件的某处触发。
如何测试doSmth是在Foo组件中执行的?
另外我必须提到我不能使用上下文和 Prop ,因为这是一个非常简化的版本。

最佳答案

import React from 'react';
import { mount } from 'enzyme';
import Foo from './Foo'

describe("Foo", () => {

it("should bubble the event up and call parent's handleClick", () => {
const handleClick = jest.spyOn(Foo.prototype, 'handleClick') //spy on handleClick function
const wrapper = mount(<Foo />);
wrapper.find('button').simulate('click'); //finding the button and simulating click
expect(handleClick).toHaveBeenCalledTimes(1) //verify function was called after click simulation
})

})

Foo.js

import React, { Component } from 'react';
import Bar from './Bar';

class Foo extends Component {
handleClick(){
console.log("bubbled")
}

render() {
return (
<div onClick={this.handleClick}>
<Bar />
</div>
);
}
}

export default Foo;

Bar.js

import React, { Component } from 'react';

class Bar extends Component {
render() {
return (
<button>Click me!</button>
);
}
}

export default Bar;

这就是使用 jest ad enzyme 测试事件冒泡的方法。

在这里查看一个工作示例 https://codesandbox.io/s/flamboyant-babbage-tl8ub

注意:进入测试选项卡以运行所有测试。

希望澄清一下!

关于javascript - React 测试事件冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59009484/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com