jest快照测试---简单入门

http://laichuanfeng.com/work/jest-snapshot-and-dom-testing-in-react/
前提：需要npm下载jest依赖包，babel依赖包。环境为node14.

这个jest用于测试react的组件，其实并没有类似函数那样子的输入输出对错 之分，而是保留像git版本之类的东西，可以用于对比每一个版本的不同点。
使用jest测试react组件，需要jest测试文件中有初始化组件态，触发事件前以及触发事件后的组件更新。

Snapshot Testing
快照测试第一次运行的时候会将 React 组件在不同情况下的渲染结果（挂载前）保存一份快照文件。后面每次再运行快照测试时，都会和第一次的比较，除非使用npm test – -u命令重新生成快照文件。

此时，如果我们修改LinkButton.js文件，比如将p标签中的文件修改为Me {text} this.Click to toggle,然后我们再次运行测试,控制台显示测试未通过，并将两次快照不核匹配的位置标记出来。这可以防止无意间修改组件的某些部分。
DOM Testing
要测试组件生成的 DOM 节点是否符合预期，比如响应事件之后，组件的属性与状态应该是怎样的。DOM Testing 依赖于官方的TestUtil（主要用于操作 DOM，模拟事件等等），所以需要安装react-addons-test-utils。同样，编写

对应的测试文件。

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import LinkButton from '../LinkButton';
describe('<LinkButton/>', () => {
  const linkButton = TestUtils.renderIntoDocument(<LinkButton />);
  const linkButtonNode = ReactDOM.findDOMNode(linkButton);
 
  it('Mount', () => {
    //获取初始状态的元素文本
    expect(linkButtonNode.textContent).toEqual('You haven\'t liked this.Click to toggle.');
  });
 
  it('Clicked', () => {
    //触发点击事件，并比较文本是否等于预期
    TestUtils.Simulate.click(linkButtonNode);
    expect(linkButtonNode.textContent).toEqual('You like this.Click to toggle.');
  });
 
  it('Clicked again', () => {
    //再次触发点击事件，并比较文本是否等于预期
    TestUtils.Simulate.click(linkButtonNode);
    expect(linkButtonNode.textContent).toEqual('You haven\'t liked this.Click to toggle.');
  });
});

生成测试覆盖报告(coverage report)
使用命令npm test – --coverage就可以生成测试覆盖报告。