混合pixijs react应用程序的功能测试

Here’s a process I’m using for enabling Cypress automation tests in a hybrid PixiJS 5 / React project. PixiJS operates on HTML Canvas elements, and of course React operates on all the other DOM elements. I’m using react-pixi-fiber to bridge between the PixiJS and React worlds, which works nicely to keep everything in the same mode of thinking.

这是我用来在混合的PixiJS 5 / React项目中启用赛普拉斯自动化测试的过程。 PixiJS在HTML Canvas元素上运行，当然，React在所有其他DOM元素上运行。 我正在使用react-pixi-fiber在PixiJS和React世界之间架起桥梁，这很好地将所有内容保持在相同的思维模式下。

Cypress is great for testing web apps and has some nice features to automatically wait and retry operations. Normally, Cypress can’t see into a canvas element, which can contain an entire “app” itself, so I was hoping to open up the PixiJS side of a project to better testability. Let’s make it happen!

赛普拉斯非常适合测试Web应用程序，并且具有一些不错的功能，可以自动等待并重试操作。 通常，赛普拉斯看不到canvas元素，canvas元素本身可以包含一个完整的“应用程序”，因此我希望打开项目的PixiJS方面以提高可测试性。 一起让它成为现实！

基本思想 (Basic Idea)

Provide a mechanism where arbitrary data can be attached to any node in a PixiJS object rendering tree, and then inspected and interacted with by a Cypress test. It’ll be able to wait for a certain state to be present (or not present) in a way that works well with asynchronous code.

提供一种机制，可以将任意数据附加到PixiJS对象渲染树中的任何节点，然后通过赛普拉斯测试进行检查并与之交互。 它将能够以与异步代码良好配合的方式等待某个状态出现(或不出现)。

公开PixiJS应用程序 (Exposing the PixiJS Application)

The first step is to save a reference to the PixiJS Application object onto the window object so that Cypress can get to the good stuff while it’s running. This happens as the result of a ref callback (note that I’m using React Hooks).

第一步是将对PixiJS Application对象的引用保存到window对象上，以使Cypress可以在运行时获得有用的东西。 这是由于ref回调的结果(请注意，我正在使用React Hooks)。

I’m using TypeScript. Things should work in a JavaScript project by removing types and the like. Speaking of TypeScript, it can be useful to define types for the objec