如何使用 Enzyme 测试 React 动画效果？-JavaScript中文网-JavaScript教程资源分享门户

如何使用 Enzyme 测试 React 动画效果？

在任何应用程序中，动画效果都是非常重要的一部分，因为它们能够让用户在使用应用程序时获得更积极的反馈，帮助用户更好地理解和导航应用程序，并提高用户体验。React 动画是很棒的，但是测试React动画是有一定挑战的。本文将介绍如何使用Enzyme测试React动画。

Enzyme是什么？

Enzyme是一个针对React组件进行测试的JavaScript库。类似于Jest和Mocha这些测试库，但针对性更强，特别是对于React组件而言。它提供了一个不错的机制来测量React组件，包括对渲染输出的断言和操作。 Enzyme基于React Test Utilities，但是添加了许多有用的方法来简化React组件的测试。它提供了三个主要的测试实用工具：Shallow，Mount和Render。在这里，我们使用Shallow工具测试React动画。

shallow测试

即使用测试组件以及它们的子级和最终的渲染结果。它不关心组件的完整性和交互性，而只是简单地渲染React组件。这个工具足以在测试React动画的时候使用。

测试前置条件首先安装Enzyme：在命令行中输入：

npm install enzyme –D

首先在需要圆形动画组件的名字为CircleAnimation.js的React组件类上，导出一个圆形的SVG，如下所示：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------

------ ------- ----- --------------- ------- --------- -
    -------- -
        ------ -
            ---- ----------- ------------ -----------------------------------
                ------- ------------------ ------------------ ---------------- ---------------------- --
            ------
        -
    -
-

这里的CircleAnimation组件包含了一个简单的SVG圆形å，可以使用传递给Props参数来调整CircleAnimation的位置和大小。接下来，我们将在CircleAnimation.test.js文件中为CircleAnimation组件编写单元测试。

编写测试用例导入必要的Enzyme工具，包括Shallow工具和断言的支持库jest-enzyme。这些库都需要在CircleAnimation.test.js文件中安装。

import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import CircleAnimation from './../CircleAnimation';

configure({ adapter: new Adapter() })

按照惯例，在测试套件之外，我们将使用Enzyme的Shallow方法渲染CircleAnimation组件，并导入Enzyme支持库，以确保所有的测试都能够工作。Shallow方法将测试组件渲染输出到虚拟DOM中。这样可以在整个测试过程中模拟出渲染的输出效果。然后，我们使用expect和toHaveProp等外部库的方法来断言虚拟DOM输出是否符合预期。

test('CircleAnimation rendered correctly', () => {
    const circleAnimation = shallow(<CircleAnimation cx="50" cy="50" r="50" fill="blue"/>);
    expect(circleAnimation.find('circle')).toHaveLength(1);
    expect(circleAnimation.find('circle')).toHaveProp('cx', '50');
    expect(circleAnimation.find('circle')).toHaveProp('cy', '50');
    expect(circleAnimation.find('circle')).toHaveProp('r', '50');
    expect(circleAnimation.find('circle')).toHaveProp('fill', 'blue');
})

在此示例代码中，我们使用shallow方法渲染CircleAnimation组件，并断言circle节点的cx，cy，r和fill属性都符合预期。如果所有这些测试都通过了，并且输出与预期的结果相符，则该测试用例被视为测试通过。这就是Enzyme测试React动画的过程。目前为止，我们已经能够测试该组件的静态部分，下一步是测试圆形组件的动画部分。

测试动画效果通常，在测试动画时，动画效果将是优先考虑的部分。在动画过程中，由于动画效果是一个时间敏感的效果，它将随时间发生变化。因此需要一个方法，通过该方法来控制时间。对于React两个主要的动画库，建议使用requestAnimationFrame或requestIdleCallback。在这个示例中，我们使用requestAnimationFrame函数。 requestAnimationFrame是一个DOM API，它以浏览器的默认速率（大约60fps）在下一帧绘制之前调用指定的函数。

global.requestAnimationFrame = function(cb) {
    return setTimeout(cb, 0);
}
global.cancelAnimationFrame = function(cb) {
    return clearTimeout(cb, 0);
}

然后，在测试套件之后，我们可以使用jest默认的timeoutsetTimeout（10000）时间周期，并使用如上所述的requestAnimationFrame来模拟requestAnimationFrame方法的调用。

-- -------------------- ---- -------
------------ --------- ----- ----------- -- -- -
    ---------------------
    ----- --------- - ------------------------ ------- ------- ------ ---------------
    -------------------------------------------------
    ------------------------------------------------- ------
    ------------------------------------------------- ------
    ------------------------------------------------ ------
    --------------------------------------------------- --------
    --------------------------------------
    --------------------
    ----------------------------------------------
    ----------------------------------------------
    --------------------------------------------
    --------------------------------------------------
---

在这个示例中，我们首先立即调用startAnimation方法，然后使用jest.runAllTimers方法来启动计时器并等待10000毫秒。当执行完毕后，我们可以检查状态cx，cy，r和fill是否与预期的结果相同。最后，在CircleAnimation类中，我们将添加启动动画的方法，该方法将用于控制时间并在此期间增加cx，cy，r和fill属性的值。

-- -------------------- ---- -------
---------------- -
    --- --------- - -----
    ----- ------- - ------ -- -
        -- ------------ --------- - -----
        ----- -------- - ---- - ----------
        ----- -- - ----------------------- - ---- - ----- - ----
        ----- -- - ----------------------- - ---- - ----- - ----
        ----- - - ----------------------- - ---- - ----- - ---
        ----- ---- - ---------------------- - ---- - ------
        ---------------
            ---
            ---
            --
            -----
        ---
        ------------------- - -------------------------------
    -
    ------------------- - -------------------------------
-

在此示例中，我们使用requestAnimationFrame来控制动画变化，使用setState方法来更新组件的状态。此外，我们分别使用easeInOutQuart和easeInOutQuint等帮助方法来控制cx，cy和r的值，以及使用colorProgress方法来控制fill值变化的颜色。最后使用animationFrame储存requestAnimationFrame返回的帧编号。这样就完成了动画测试的编写。

结论

在这篇文章中，我们已经介绍了如何使用Enzyme测试React动画。我们首先介绍了Enzyme，然后编写了一个能够测试静态组件输出效果的示例代码。接下来，我们使用requestAnimationFrame模拟了测试组件的动画效果。通过这些测试用例，我们可以确保我们的组件在所有时间上的行为都符合预期。这是一个非常强大的测试框架方法，旨在确保在捕获各种常见错误的同时改善测试覆盖率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6770e178e9a7045d0d828d0e