props,挂载函数和快照测试

更新日期: 2019-09-19阅读: 3.7k标签: props

测试 props

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

ToDoList.js
import react from 'react';
import Task from "../Task/Task";
 
const ToDoList = (props) => {
  return (
    <ul>
      {
        props.tasks.map(task =>
          <Task key={task.id} id={task.id} name={task.taskName}/>
        )
      }
    </ul>
  )
};
 
export default ToDoList;

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

ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
 
describe('ToDoList component', () => {
  describe('when provided with an array of tasks', () => {
    it('passes them to the Task components', () => {
      const tasks = [
        {
          id: 0,
          name: 'Wash the dishes'
        },
        {
          id: 1,
          name: 'Make the bed'
        }
      ];
      const toDoListInstance = shallow(
        <ToDoList tasks={tasks}/>
      );
      toDoListInstance.find('Task').forEach(taskInstance => {
        const taskProps = taskInstance.props();
        const matchingTask = tasks.find(task => task.id === taskProps.id);
        expect(taskProps.name).toBe(matchingTask.name);
      })
    })
  });
});

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

由于 toDoListInstance 和 taskInstance 均继承自 ShallowWrapper,因此我们可以调用 props 函数。同样,你可以检查和更改状态。有关可用函数的完整列表,请访问文档

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

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

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

 FAIL  app/components/ToDoList/ToDoList.test.js
   ToDoList component › when provided with array of tasks › passes them to the Task components
 
    expect(received).toBe(expected) // Object.is equality
 
    Expected: "Wash the dishes"
    Received: "<Task />"
 
      23 |         const matchingTask = tasks.find(task => task.id === taskProps.id);
      24 |         const listItem = taskInstance.first('li');
    > 25 |         expect(listItem.text()).toBe(matchingTask.name);
         |                                 ^
      26 |       })
      27 |     })
      28 |   });


使用 mount 函数渲染

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

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

在早期版本的Enzyme中,在浅层渲染期间未调用生命周期方法。但是在 Enzyme 3.0 中发生了变化
const toDoListInstance = mount(
  <ToDoList tasks={tasks}/>
);

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

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

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

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

要了解有关高阶组件的更多信息,请查看官方指南和 David Kopal 的文章


快照测试

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

ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
 
describe('ToDoList component', () => {
  describe('when provided with an array of tasks', () => {
    it('should render correctly', () => {
      const tasks = [
        {
          id: 0,
          name: 'Wash the dishes'
        },
        {
          id: 1,
          name: 'Make the bed'
        }
      ];
      const toDoListInstance = shallow(
        <ToDoList tasks={tasks}/>
      );
      expect(toDoListInstance).toMatchSnapshot();
    });
  });
});

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

ToDoList.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
 
exports[`ToDoList component when provided with array of tasks should render correctly 1`] = `
<ul>
  <Task
    id={0}
    key="0"
    name="Wash the dishes"
  />
  <Task
    id={1}
    key="1"
    name="Make the bed"
  />
</ul>
`;

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

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

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


摘要

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

原文:https://wanago.io/2018/09/10/javascript-testing-tutorial-part-three-testing-props-the-mount-function-and-snapshot-tests/


链接: https://fly63.com/article/detial/6483

TypeScript中的React Render Props

和之前的文章一样,本文也要求你对render props有一些知识背景,如果没有官方文档可能会对你有很大的帮助。本文将会使用函数作为children的render props模式以及结合React的context API来作为例子。

Node.js之react.js组件-Props应用

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面),具有 render prop 的组件接受一个函数

React组件设计模式-Render-props

写业务时,我们经常需要抽象一些使用频率较高的逻辑,但是除了高阶组件可以抽象逻辑,RenderProps也是一种比较好的方法。RenderProps,顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数,由函数来渲染内容。将通用的逻辑

props、属性、事件传递

之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind=$props将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己以后查看

vue props传值常见问题

传入的值想作为局部变量来使用,直接使用会 报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值,解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型

Vue 中的 Props 与 Data 细微差别,你知道吗?

Vue提供了两种不同的存储变量:props和data。这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。那么props和data有什么区别呢?

React组件的state和props

React 的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在 props 和 state 中。实际上在任何应用中,数据都是必不可少的,我们需要直接的改变页面上一块的区域来使得视图的刷新

验证 Vue Props 类型,这几种方式你可能还没试用过!

vue 要求任何传递给组件的数据,都要声明为 props。此外,它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样,确保组件按预期使用。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!