<div id="js_content">
<h2>???????? 写在前面</h2>
<p>上篇文章我们已经了解了前端单元测试的背景和基础的<code>jest</code>api，本篇文章我会先介绍一下<code>Enzyme</code>，然后结合项目中的一个真实组件，来为它编写测试用例。</p>
<h2>???????? <code>Enzyme</code></h2>
<p>上一篇中我们其实已经简单介绍了<code>enzyme</code>，但这远远不够，在本篇的组件测试用例编写中，我们有很多地方要用到它，因此这里专门来说明一下。</p>
<p><code>Enzyme</code>是由<code>Airbnb</code>开源的一个<code>React</code>的<code>JavaScript</code>测试工具，使<code>React</code>组件的输出更加容易。<code>Enzyme</code>的<code>API</code>和<code>jQuery</code>操作<code>DOM</code>一样灵活易用，因为它使用的是<code>cheerio</code>库来解析虚拟<code>DOM</code>，而<code>cheerio</code>的目标则是做服务器端的<code>jQuery</code>。<code>Enzyme</code>兼容大多数断言库和测试框架，如<code>chai</code>、<code>mocha</code>、<code>jasmine</code>等。</p>
<blockquote>
“
<p>???? 关于安装和配置，上一小节已经有过说明，这里就不赘述了</p>
</blockquote>
<h3>常用函数</h3>
<p><code>enzyme</code>中有几个比较核心的函数，如下：</p>
<ul><li><p><code>simulate(event, mock)</code>：用来模拟事件触发，<code>event</code>为事件名称，<code>mock</code>为一个<code>event object</code>；</p></li><li><p><code>instance()</code>：返回测试组件的实例；</p></li><li><p><code>find(selector)</code>：根据选择器查找节点，<code>selector</code>可以是<code>CSS</code>中的选择器，也可以是组件的构造函数，以及组件的<code>display name</code>等；</p></li><li><p><code>at(index)</code>：返回一个渲染过的对象；</p></li><li><p><code>text()</code>：返回当前组件的文本内容；</p></li><li><p><code>html()</code>：返回当前组件的<code>HTML</code>代码形式；</p></li><li><p><code>props()</code>：返回根组件的所有属性；</p></li><li><p><code>prop(key)</code>：返回根组件的指定属性；</p></li><li><p><code>state()</code>：返回根组件的状态；</p></li><li><p><code>setState(nextState)</code>：设置根组件的状态；</p></li><li><p><code>setProps(nextProps)</code>：设置根组件的属性；</p></li></ul>
<h3>渲染方式</h3>
<p><code>enzyme</code> 支持三种方式的渲染：</p>
<ul><li><p><code>shallow：浅渲染</code>，是对官方的<code>Shallow Renderer</code>的封装。将组件渲染成<code>虚拟DOM对象</code>，只会渲染第一层，子组件将不会被渲染出来，因而效率非常高。不需要 DOM 环境， 并可以使用<code>jQuery</code>的方式访问组件的信息；</p></li><li><p><code>render：静态渲染</code>，它将<code>React</code>组件渲染成静态的<code>HTML</code>字符串，然后使用<code>Cheerio</code>这个库解析这段字符串，并返回一个<code>Cheerio</code>的实例对象，可以用来分析组件的<code>html</code>结构；</p></li><li><p><code>mount：完全渲染</code>，它将组件渲染加载成一个<code>真实的DOM节点</code>，用来测试<code>DOM API</code>的交互和组件的生命周期，用到了<code>jsdom</code>来模拟浏览器环境。</p></li></ul>
<p>三种方法中，<code>shallow</code>和<code>mount</code>因为返回的是<code>DOM</code>对象，可以用<code>simulate</code>进行交互模拟，而<code>render</code>方法不可以。一般<code>shallow</code>方法就可以满足需求，如果需要对子组件进行判断，需要使用<code>render</code>，如果需要测试组件的生命周期，需要使用<code>mount</code>方法。</p>
<blockquote>
“
<p>渲染方式部分参考的这篇文章</p>
</blockquote>
<h2>???? “踩坑之路”开启</h2>
<h3>组件代码</h3>
<p>首先，来看下我们需要对其进行测试的组件部分的代码：</p>
<blockquote>
“
<p> 因为牵扯到内部代码，所以很多地方都打码了。重在演示针对不同类型的测试用例的编写</p>
</blockquote>
<pre class="blockcode"><code class="language-go">import { SearchOutlined } from "@ant-design/icons"
import {
Button,
Col,
DatePicker,
Input,
message,
Modal,
Row,
Select,
Table,
} from "antd"
import { connect } from "dva"
import { Link, routerRedux } from "dva/router"
import moment from "moment"
import PropTypes from "prop-types"
import React from "react"
const { Option } = Select
const { RangePicker } = DatePicker
const { confirm } = Modal
export class MarketRuleManage extends React.Component {
constructor(props) {
super(props)
this.state = {
productID: "",
}
}
componentDidMount() {
// console.log("componentDidMount生命周期")
}
getTableC |
|
转播
