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似乎並沒有工作

回答

相關問題