400-616-5551

您所在位置: 首页> 学习课程> java培训 | 测试 props,挂载函数和快照测试

java培训 | 测试 props,挂载函数和快照测试

发布百知教育 来源:学习课程 2019-11-18

  • 1. JavaScript测试教程-part 1:用 Jest 进行单元测试

  • 2. JavaScript测试教程–part 2:引入 Enzyme 并测试 React 组件

  • 3. JavaScript测试教程–part 3:测试 props,挂载函数和快照测试

  • 4. JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互

在上一篇教程中,我介绍了使用 Enzyme 测试 React 组件的基础知识。今天,将进行更深入的研究,并学习如何测试 props,如何(以及为什么)使用 mount 函数以及什么是快照测试。开始吧!

测试 props

在上一篇文章中,我们测试了通过一些 props 的结果。但是实际上,我们可以直接测试 props。让我们回到上次的 ToDoList 组件,不过这次要用一个新的 Task 组件。

ToDoList.js
ToDoList.js
 1import React from 'react';
2import Task from "../Task/Task";
3
4const ToDoList = (props) => {
5  return (
6    <ul>
7      {
8        props.tasks.map(task =>
9          <Task key={task.id} id={task.id} name={task.taskName}/>
10        )
11      }
12    </ul>
13  )
14};
15
16export default ToDoList;
17

我们将要测试 ToDoList 组件是否渲染 Task 组件,并将任务名称传递给他们。

ToDoList.test.js
 1import React from 'react';
2import { shallow } from 'enzyme';
3import ToDoList from './ToDoList';
4
5describe('ToDoList component', () => {
6  describe('when provided with an array of tasks', () => {
7    it('passes them to the Task components', () => {
8      const tasks = [
9        {
10          id0,
11          name'Wash the dishes'
12        },
13        {
14          id1,
15          name'Make the bed'
16        }
17      ];
18      const toDoListInstance = shallow(
19        <ToDoList tasks={tasks}/>
20      );
21      toDoListInstance.find('Task').forEach(taskInstance => {
22        const taskProps = taskInstance.props();
23        const matchingTask = tasks.find(task => task.id === taskProps.id);
24        expect(taskProps.name).toBe(matchingTask.name);
25      })
26    })
27  });
28});
29

通过测试,我们可以确保 Task 组件能够从 ToDoList 接收正确的 props。

由于 toDoListInstance  taskInstance 均继承自 ShallowWrapper,因此我们可以调用 props函数。同样,你可以检查和更改状态。

但是如果我们想测试 Task 组件中 <li> 标记的实际内容怎么办?

1toDoListInstance.find('Task').forEach(taskInstance => {
2  const taskProps = taskInstance.props();
3  const matchingTask = tasks.find(task => task.id === taskProps.id);
4  const listItem = taskInstance.first('li');
5  expect(listItem.text()).toBe(matchingTask.name);
6})

运行测试后你将会看到一个错误:

 1 FAIL  app/components/ToDoList/ToDoList.test.js
2  ● ToDoList component › when provided with array of tasks › passes them to the Task components
3
4    expect(received).toBe(expected) // Object.is equality
5
6    Expected: "Wash the dishes"
7    Received: "<Task />"
8
9      23 |         const matchingTask = tasks.find(task => task.id === taskProps.id);
10      24 |         const listItem = taskInstance.first('li');
11    > 25 |         expect(listItem.text()).toBe(matchingTask.name);
12         |                                 ^
13      26 |       })
14      27 |     })
15      28 |   });

使用 mount 函数渲染

失败了,因为我们在这里用了“浅渲染”。在这种情况下子组件将根本不会被渲染。所以上面的测试失败了,你需要了解“浅渲染”的局限性。

Mount 模拟了 DOM 的实现,而 Jest 默认使用 jsdom。你可以通过 testEnvironment 属性进行更改。

在早期版本的Enzyme中,在浅层渲染期间未调用生命周期方法。但是在 Enzyme 3.0 中发生了变化

1const toDoListInstance = mount(
2  <ToDoList tasks={tasks}/>
3);
4

运行上面的代码将使整个 ToDoList 组件及其所有子组件渲染。前面失败的测试现在将会通过。


由于 mount 函数可渲染更多内容并模仿实际的 DOM,所以测试将会花费更多时间。使用 mount函数可能意味着你是在进行单元测试,而现在在进行集成测试。正是由于这个事实,使用 mount函数能够测试这些组件是否可以协同工作,而不仅仅是单独的单元测试。

要弄清楚单元测试集成测试的区别,请参见本教程第一部分

在测试与 DOM 的交互或高阶组件时,它也被证明是有用的。

要了解有关高阶组件的更多信息,请查看官方指南【https://reactjs.org/docs/higher-order-components.html】和 David Kopal 的文章【https://medium.freecodecamp.org/higher-order-components-the-ultimate-guide-b453a68bb851

快照测试

在测试中使用快照是非常有用的。在测试期间,将渲染组件并创建其快照。它包含渲染组件的整个结构,应该与测试本身一起提交给存储库。再次运行快照测试时,新的快照将与旧的进行比较。如果它们不同,则测试将失败。这将帮助你确保用户界面不会被意外更改。

ToDoList.test.js
 1import React from 'react';
2import { shallow } from 'enzyme';
3import ToDoList from './ToDoList';
4
5describe('ToDoList component', () => {
6  describe('when provided with an array of tasks', () => {
7    it('should render correctly', () => {
8      const tasks = [
9        {
10          id0,
11          name'Wash the dishes'
12        },
13        {
14          id1,
15          name'Make the bed'
16        }
17      ];
18      const toDoListInstance = shallow(
19        <ToDoList tasks={tasks}/>
20      );
21      expect(toDoListInstance).toMatchSnapshot();
22    });
23  });
24});
25

运行上面的代码将会创建一个名为 ToDoList.test.js.snap 的文件

ToDoList.test.js.snap
 1// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3exports[`ToDoList component when provided with array of tasks should render correctly 1`] = `
4<ul>
5  <Task
6    id={0}
7    key="0"
8    name="Wash the dishes"
9  />
10  <Task
11    id={1}
12    key="1"
13    name="Make the bed"
14  />
15</ul>
16`
;

要更新所有失败的快照,你可以使用 `-u 标志( --updateSnapshot的别名)运行 Jest。命令为 npm run test -- -u

你还可以在 watch 模式下运行 Jest,这能够允许你一个接一个地更新所有有冲突的快照。为了做到这一点,请运行 npm run test---watchAll,然后选择 i 交互式地更新失败的快照。官方 Jest 文档【https://jestjs.io/docs/zh/snapshot-testing】中有一个很好的动画演示了这个过程。

快照测试可以成为跟踪组件更改的非常强大的工具。这样可以防止你以意想不到的方式更改组件,从而迫使你查看所做的更改并接受或解决问题。因此它可用作监视代码的工具。

摘要

在本文中,我们介绍了对组件的 props 进行测试的过程,并了解了 mount 函数和 浅渲染 之间的区别。除此之外,我们还介绍了快照测试,它是跟踪组件渲染方式变化的有用工具。



作者:Marcin Wanago

翻译:疯狂的技术宅

来源:wanago.io


java培训:http://www.baizhiedu.com/java2019



上一篇:大数据培训 | 大数据组件Hadoop、HBase等原理总结

下一篇:应届生去公司找个Java程序员的职位需要什么技能?

相关推荐

www.baizhiedu.com

有位老师想和您聊一聊

关闭

立即申请