【React高级技术】合成事件以及 Test Utilities测试框架在Facebook内部进行测试

简介: 【React高级技术】合成事件以及 Test Utilities测试框架在Facebook内部进行测试

合成事件

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
AI 代码解读

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});
}
AI 代码解读

SyntheticEvent被合并。这意味着可以重用SyntheticEvent对象,并且在调用事件回调函数后,所有属性都将无效。出于性能原因,您不能异步访问事件。

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary
AI 代码解读

Test Utilities

ReactTestUtils可以与您选择的测试框架一起使用,以便轻松测试React组件。在Facebook内部,我们使用Jest轻松实现JavaScript测试。

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

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>
    );
  }
}
AI 代码解读

不要忘记,触发器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');
});
AI 代码解读

将仿真组件模块传递到该方法中后,React模块将填充有效的方法,使其成为虚拟React组件。与通常的渲染不同,组件将变成一个简单的<div>(如果提供了mockTagName,则为其他标记),包括任何提供的子级。

scryRenderedComponentsWithType(
  tree,
  componentClass
)
AI 代码解读

这个包提供了一个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());
AI 代码解读
目录
打赏
0
0
4
0
154
分享
相关文章
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
AxBench 是由斯坦福大学推出,用于评估语言模型可解释性方法的基准测试框架,支持概念检测和模型转向任务,帮助研究者系统地比较不同控制技术的有效性。
31 5
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
pytest接口自动化测试框架搭建
通过上述步骤,我们成功搭建了一个基于 `pytest`的接口自动化测试框架。这个框架具备良好的扩展性和可维护性,能够高效地管理和执行API测试。通过封装HTTP请求逻辑、使用 `conftest.py`定义共享资源和前置条件,并利用 `pytest.ini`进行配置管理,可以大幅提高测试的自动化程度和执行效率。希望本文能为您的测试工作提供实用的指导和帮助。
114 15
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
546 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
本指南介绍如何利用 HTA 文件和 Metasploit 框架进行渗透测试。通过创建反向 shell、生成 HTA 文件、设置 HTTP 服务器和发送文件,最终实现对目标系统的控制。适用于教育目的,需合法授权。
91 9
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
探索软件测试中的自动化测试框架选择与优化策略
本文深入探讨了在现代软件开发流程中,如何根据项目特性、团队技能和长期维护需求,精准选择合适的自动化测试框架。
154 11
|
2月前
|
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
62 9
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等