Skip to Content

测试

¥Testing

有很多选项可以测试 React 应用。如果你想测试 React Flow 应用,我们建议使用 Cypress Playwright 。React Flow 需要测量节点才能渲染边缘,而这依赖于渲染 DOM 元素。

¥There are plenty of options to test a React application. If you want to test a React Flow application, we recommend to use Cypress  or Playwright . React Flow needs to measure nodes in order to render edges and for that relies on rendering DOM elements.

使用 Cypress 或 Playwright

¥Using Cypress or Playwright

如果你使用的是 Cypress 或 Playwright,则无需进行其他设置。你可以参考 Cypress 此处 Playwright 在这里  的入门指南。

¥If you are using Cypress or Playwright no additional setup is needed. You can refer to the getting started guide for Cypress here  and for Playwright here .

使用 Jest

¥Using Jest

如果你使用的是 Jest ,则需要模拟一些功能才能运行测试。你可以通过将此文件添加到你的项目中来做到这一点。在 setupTests 文件中(或在 beforeEach 内)调用 mockReactFlow() 将触发必要的覆盖。

¥If you are using Jest , you need to mock some features in order to be able to run your tests. You can do that by adding this file to your project. Calling mockReactFlow() in a setupTests file (or inside a beforeEach) will trigger the necessary overrides.

// To make sure that the tests are working, it's important that you are using // this implementation of ResizeObserver and DOMMatrixReadOnly class ResizeObserver { callback: globalThis.ResizeObserverCallback; constructor(callback: globalThis.ResizeObserverCallback) { this.callback = callback; } observe(target: Element) { this.callback([{ target } as globalThis.ResizeObserverEntry], this); } unobserve() {} disconnect() {} } class DOMMatrixReadOnly { m22: number; constructor(transform: string) { const scale = transform?.match(/scale\(([1-9.])\)/)?.[1]; this.m22 = scale !== undefined ? +scale : 1; } } // Only run the shim once when requested let init = false; export const mockReactFlow = () => { if (init) return; init = true; global.ResizeObserver = ResizeObserver; // @ts-ignore global.DOMMatrixReadOnly = DOMMatrixReadOnly; Object.defineProperties(global.HTMLElement.prototype, { offsetHeight: { get() { return parseFloat(this.style.height) || 1; }, }, offsetWidth: { get() { return parseFloat(this.style.width) || 1; }, }, }); (global.SVGElement as any).prototype.getBBox = () => ({ x: 0, y: 0, width: 0, height: 0, }); };

如果你想使用 jest 测试鼠标事件(例如在你的自定义节点内),则需要禁用 d3-drag,因为它在浏览器之外不起作用:

¥If you want to test mouse events with jest (for example inside your custom nodes), you need to disable d3-drag as it does not work outside of the browser:

<ReactFlow nodesDraggable={false} panOnDrag={false} {...rest} />
Last updated on