日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React合成事件及Test?Utilities在Facebook內部進行測試_React

作者：黎燃 ? 更新時間： 2023-01-30 編程語言

合成事件

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實例將傳遞給事件處理程序，它是瀏覽器本地事件的跨瀏覽器包裝器。除了與所有瀏覽器兼容外，它還具有與瀏覽器本機事件相同的接口，包括stopPropagation（）和preventDefault（）。 如果出于某種原因，需要使用瀏覽器的基礎事件，則只需使用nativeEvent屬性即可獲得它。

從v0.14開始，當事件處理程序返回false時，不再阻止事件氣泡。您可以選擇改用e.stopPropagation（）或e.preventDefault（）。 不起作用，this.state.clickEvent 的值將會只包含 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});
  // 你仍然可以導出事件屬性
  this.setState({eventType: event.type});
}

SyntheticEvent被合并。這意味著可以重用SyntheticEvent對象，并且在調用事件回調函數后，所有屬性都將無效。出于性能原因，您不能異步訪問事件。

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

Test Utilities

ReactTestUtils可以與您選擇的測試框架一起使用，以便輕松測試React組件。在Facebook內部，我們使用Jest輕松實現JavaScript測試。

import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 使用 npm 的方式

act()

為斷言準備一個組件，包裝要呈現的代碼，并在調用act（）時執行更新。這將使測試更接近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>
    );
  }
}

不要忘記，觸發器DOM事件僅在將DOM容器添加到文檔時生效。您可以使用React Testing Library這樣的庫來減少樣板代碼。

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', () => {
  // 首先測試 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');
  // 再測試 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組件。與通常的渲染不同，組件將變成一個簡單的＜div＞（如果提供了mockTagName，則為其他標記），包括任何提供的子級。

scryRenderedComponentsWithType(
  tree,
  componentClass
)

這個包提供了一個React渲染器，可以將React組件渲染為純JavaScript對象，而不依賴DOM或本地移動環境。 這個包的主要功能是在某個時間點返回由React DOM或React Native平臺呈現的視圖結構（類似于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());

原文鏈接：https://juejin.cn/post/7173685018400096286

欄目分類
最近更新