jsdom：dispatchEvent /的addEventListener似乎并没有工作

摘要：jsdom：dispatchEvent /的addEventListener似乎并没有工作

我试图测试阵营组件侦听本机的DOM事件在其componentWillMount。

我发现jsdom（@8.4.0）在调度事件和添加事件侦听器时无法按预期工作。

我可以提取的代码最简单的一点：

window.addEventListener('click',() => { 
    throw new Error("success") 
}) 

const event = new Event('click') 
document.dispatchEvent(event) 

throw new Error('failure')

这将引发 “失败”。

语境：

在上述的风险是一个XY problem，我想提供更多的上下文。

这是我试图测试的组件的提取/简化版本。 You can see it working on Webpackbin.

import React from 'react' 

export default class Example extends React.Component { 
    constructor() { 
    super() 
    this._onDocumentClick = this._onDocumentClick.bind(this) 
    } 

    componentWillMount() { 
    this.setState({ clicked: false }) 
    window.addEventListener('click', this._onDocumentClick) 
    } 

    _onDocumentClick() { 
    const clicked = this.state.clicked || false 
    this.setState({ clicked: !clicked }) 
    } 


    render() { 
    return <p>{JSON.stringify(this.state.clicked)}</p> 
    } 
}

这是我试图写的测试。

import React from 'react' 
import ReactDOM from 'react-dom' 
import { mount } from 'enzyme' 

import Example from '../src/example' 

describe('test',() => { 
    it('test',() => { 
    const wrapper = mount(<Example />) 

    const event = new Event('click') 
    document.dispatchEvent(event) 

    // at this point, I expect the component to re-render, 
    // with updated state. 

    expect(wrapper.text()).to.match(/true/) 
    }) 
})

只是为了完整性，这里是我的test_helper.js它初始化jsdom：

import { jsdom } from 'jsdom' 
import chai from 'chai' 

const doc = jsdom('<!doctype html><html><body></body></html>') 
const win = doc.defaultView 

global.document = doc 
global.window = win 

Object.keys(window).forEach((key) => { 
    if (!(key in global)) { 
    global[key] = window[key] 
    } 
})

繁殖情况：

我这里有一个摄制情况：https://github.com/jbinto/repro-jsdom-events-not-firing

git clone https://github.com/jbinto/repro-jsdom-events-not-firing.git cd repro-jsdom-events-not-firing npm install npm test

来源

2016-04-22 Jesse Buchanan

这里的问题是，jsdom提供的document实际上并不习惯通过酶试验。

酶使用renderIntoDocument从React.TestUtils。

https://github.com/facebook/react/blob/510155e027d56ce3cf5c890c9939d894528cf007/src/test/ReactTestUtils.js#L85

{ 
    renderIntoDocument: function(instance) { 
    var div = document.createElement('div'); 
    // None of our tests actually require attaching the container to the 
    // DOM, and doing so creates a mess that we rely on test isolation to 
    // clean up, so we're going to stop honoring the name of this method 
    // (and probably rename it eventually) if no problems arise. 
    // document.documentElement.appendChild(div); 
    return ReactDOM.render(instance, div); 
    }, 
// ... 
}

这意味着我们所有的酶试验，不是针对jsdom提供的document执行，而是进入从任何文档分离一个div节点。

酶只对静态方法使用jsdom提供的document，例如， getElementById等。它不用于存储/操作DOM元素。

为了做这些测试，我使用了实际调用ReactDOM.render，并使用DOM方法对输出进行断言。

来源

2016-06-20 14:26:54

您正在将活动发送到document，因此window不会看到它，因为默认情况下它不会冒泡。您需要创建bubbles设置为true的事件。例如：

var jsdom = require("jsdom"); 

var document = jsdom.jsdom(""); 
var window = document.defaultView; 

window.addEventListener('click', function (ev) { 
    console.log('window click', ev.target.constructor.name, 
       ev.currentTarget.constructor.name); 
}); 

document.addEventListener('click', function (ev) { 
    console.log('document click', ev.target.constructor.name, 
       ev.currentTarget.constructor.name); 
}); 

console.log("not bubbling"); 

var event = new window.Event("click"); 
document.dispatchEvent(event); 

console.log("bubbling"); 

event = new window.Event("click", {bubbles: true}); 
document.dispatchEvent(event);

来源

2016-04-22 22:28:34 Louis

'新window.Event（ “点击”）;'ermagerd。 'doc.createEvent（'MouseEvents'）。initEvent（'click'，true，true）'在jsdom中返回undefined ... 1.5hrs以找到您的答案O.o – Larry

代码：https://github.com/LVCarnevalli/create-react-app/blob/master/src/components/datepicker

链接：ReactTestUtils.Simulate can't trigger event bind by addEventListener?

组件：

componentDidMount() { 
ReactDOM.findDOMNode(this.datePicker.refs.input).addEventListener("change", (event) => { 
    const value = event.target.value; 
    this.handleChange(Moment(value).toISOString(), value); 
    }); 
}

测试：

it('change empty value date picker',() => { 
    const app = ReactTestUtils.renderIntoDocument(<Datepicker />); 
    const datePicker = ReactDOM.findDOMNode(app.datePicker.refs.input); 
    const value = ""; 

    const event = new Event("change"); 
    datePicker.value = value; 
    datePicker.dispatchEvent(event); 

    expect(app.state.formattedValue).toEqual(value); 
});

来源

2017-07-14 00:04:37

jsdom：dispatchEvent /的addEventListener似乎并没有工作

回答

相关问题