React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測(cè)試
合成事件
boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boolean isPropagationStopped() void persist() DOMEventTarget target number timeStamp string type
SyntheticEvent實(shí)例將傳遞給事件處理程序,它是瀏覽器本地事件的跨瀏覽器包裝器。除了與所有瀏覽器兼容外,它還具有與瀏覽器本機(jī)事件相同的接口,包括stopPropagation()和preventDefault()。 如果出于某種原因,需要使用瀏覽器的基礎(chǔ)事件,則只需使用nativeEvent屬性即可獲得它。
從v0.14開始,當(dāng)事件處理程序返回false時(shí),不再阻止事件氣泡。您可以選擇改用e.stopPropagation()或e.preventDefault()。 不起作用,this.state.clickEvent 的值將會(huì)只包含 null
function onClick(event) {
console.log(event); // => nullified object.
console.log(event.type); // => "click"
const eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
this.setState({clickEvent: event});
// 你仍然可以導(dǎo)出事件屬性
this.setState({eventType: event.type});
}
SyntheticEvent被合并。這意味著可以重用SyntheticEvent對(duì)象,并且在調(diào)用事件回調(diào)函數(shù)后,所有屬性都將無(wú)效。出于性能原因,您不能異步訪問(wèn)事件。
number pointerId number width number height number pressure number tangentialPressure number tiltX number tiltY number twist string pointerType boolean isPrimary
Test Utilities
ReactTestUtils可以與您選擇的測(cè)試框架一起使用,以便輕松測(cè)試React組件。在Facebook內(nèi)部,我們使用Jest輕松實(shí)現(xiàn)JavaScript測(cè)試。
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 使用 npm 的方式
act()
為斷言準(zhǔn)備一個(gè)組件,包裝要呈現(xiàn)的代碼,并在調(diào)用act()時(shí)執(zhí)行更新。這將使測(cè)試更接近React在瀏覽器中的工作方式。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
handleClick() {
this.setState(state => ({
count: state.count + 1,
}));
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleClick}>
Click me
</button>
</div>
);
}
}
不要忘記,觸發(fā)器DOM事件僅在將DOM容器添加到文檔時(shí)生效。您可以使用React Testing Library這樣的庫(kù)來(lái)減少樣板代碼。
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it('can render and update a counter', () => {
// 首先測(cè)試 render 和 componentDidMount
act(() => {
ReactDOM.render(<Counter />, container);
});
const button = container.querySelector('button');
const label = container.querySelector('p');
expect(label.textContent).toBe('You clicked 0 times');
expect(document.title).toBe('You clicked 0 times');
// 再測(cè)試 render 和 componentDidUpdate
act(() => {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
});
expect(label.textContent).toBe('You clicked 1 times');
expect(document.title).toBe('You clicked 1 times');
});
將仿真組件模塊傳遞到該方法中后,React模塊將填充有效的方法,使其成為虛擬React組件。與通常的渲染不同,組件將變成一個(gè)簡(jiǎn)單的<div>(如果提供了mockTagName,則為其他標(biāo)記),包括任何提供的子級(jí)。
scryRenderedComponentsWithType( tree, componentClass )
這個(gè)包提供了一個(gè)React渲染器,可以將React組件渲染為純JavaScript對(duì)象,而不依賴DOM或本地移動(dòng)環(huán)境。 這個(gè)包的主要功能是在某個(gè)時(shí)間點(diǎn)返回由React DOM或React Native平臺(tái)呈現(xiàn)的視圖結(jié)構(gòu)(類似于DOM樹)的快照,而不依賴瀏覽器或jsdom。
import TestRenderer from 'react-test-renderer';
function Link(props) {
return <a href={props.page}>{props.children}</a>;
}
const testRenderer = TestRenderer.create(
<Link page="https://www.facebook.com/">Facebook</Link>
);
console.log(testRenderer.toJSON());以上就是React合成事件及Test Utilities在Facebook內(nèi)部進(jìn)行測(cè)試的詳細(xì)內(nèi)容,更多關(guān)于React合成Test Utilities測(cè)試的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-10-10
漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)
這篇文章主要為大家介紹了漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問(wèn)題及解決
這篇文章主要介紹了react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例(iOS和Android通用)
本篇文章主要介紹了React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例(iOS和Android通用),具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
React?Fiber?樹思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解
這篇文章主要為大家介紹了React?Fiber?樹思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook
這篇文章主要為大家介紹了useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
React中實(shí)現(xiàn)編輯框自動(dòng)獲取焦點(diǎn)與失焦更新功能
在React應(yīng)用中,編輯框的焦點(diǎn)控制和數(shù)據(jù)回填是一個(gè)常見需求,本文將介紹如何使用useRef和useEffect鉤子,在組件中實(shí)現(xiàn)輸入框自動(dòng)獲取焦點(diǎn)及失焦后更新數(shù)據(jù)的功能,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-01-01

