Javascript 在React中冒泡的测试事件

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

例如：

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

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

类Foo扩展了React.Component{
doSmth（）{
console.log（'bubble'）；
}
render（）{
返回(
);
}
}

我有一个父组件和一个子组件。单击事件在条形图组件中的某个位置触发。
如何测试doSmth是在Foo组件中执行的？

---

另外，我必须指出，我不能使用上下文和道具，因为这是一个非常简化的版本。

基于此线程，React测试库似乎允许事件冒泡：

听起来像是

fireEvent。默认情况下，单击

有

气泡：true

，因此您应该能够执行类似操作，您单击的组件（按钮？）有文本“单击我”：

const {queryByText} = render(<Foo />);
fireEvent.click(queryByText(‘Click me’));

const{queryByText}=render（）；
firevent.click（queryByText（'clickme'）；

从“React”导入React；
从“酶”导入{mount}；
从“./Foo”导入Foo
描述（“Foo”，（）=>{
它（“应该使事件冒泡并调用家长的handleClick”，（）=>{
const handleClick=jest.spyOn（Foo.prototype，'handleClick'）//监视handleClick函数
const wrapper=mount（）；
wrapper.find（'button'）.simulate（'click'）；//查找按钮并模拟单击
expect（handleClick）.toHaveBeenCalledTimes（1）//在单击模拟后验证函数是否被调用
})
})

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;

import React，{Component}来自'React'；
从“./Bar”导入Bar；
类Foo扩展组件{
handleClick（）{
console.log（“冒泡”）
}
render（）{
返回(
);
}
}
导出默认Foo；

Bar.js

import React, { Component } from 'react';

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

export default Bar;

import React，{Component}来自'React'；
类栏扩展组件{
render（）{
返回(
点击我！
);
}
}
导出默认栏；

这就是如何用jest ad酶测试事件冒泡的方法

在这里查看一个工作示例

注意：进入“测试”选项卡以运行所有测试

---

希望澄清

这回答了你的问题吗？（

enzyme

在引擎盖下使用

jsdom

）

import React, { Component } from 'react';

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

export default Bar;