在进行前端开发时，我们经常需要对特定的数据结构或数据流进行深度遍历或者浅层比较。为了更好地解决这一类问题，我们可以使用npm包chai-shallowly。该包提供了一系列方法来实现数据的深度遍历以及浅层比较，为我们的开发节省了很多时间和精力。
安装chai-shallowly
为了使用chai-shallowly，我们需要先进行安装。我们可以使用npm来进行安装，命令如下：
npm install chai-shallowly --save-dev
这个命令将会安装chai-shallowly到当前项目中，在devDependencies下面。
使用chai-shallowly
在安装完包后，我们需要引入chai-shallowly和chai。chai-shallowly是对chai的一个插件，提供了更多的特性。使用chai-shallowly，我们需要先进行chai插件的引入：
const chai = require('chai'); const chaiShallowly = require('chai-shallowly'); chai.use(chaiShallowly);
chai的默认行为
在了解chai-shallowly之前，我们需要先了解chai所有属性的默认行为。在chai中，我们有四种数据比较的方法：expect，assert，should和assert.deepEqual。chai的默认行为比较时会进行深层比较，会递归地比较对象中的每一个属性是否相等。在开发过程中，有时我们更关注数据的结构，而不必过多地比较数据是否完全相等。此时，chai-shallowly就是我们很好的选择。
深度遍历
在chai-shallowly中，有两个方法来实现数据的深度遍历。其一是shallowly.equal方法，用于比较两个对象浅层是否相等。其二是shallowly.include方法，用于在一个集合中查找特定对象。
shallowly.equal
shallowly.equal方法用于比较两个对象浅层是否相等。它比assert.deepEqual更具有针对性，所以我们可以利用它来进行结构的比较。下面是一些使用案例：
-- -------------------- ---- ------- ----- ---- - - ----- -------- ----- - ----- - ----- ----------------- -------- ------- - - -- ----- ---- - - ----- -------- ----- - ----- - ----- ----------------- -------- ------- - - -- -------------------------------------- -- ----- ----------------- --- -------------------------- -- ----- --------- ---展开代码
shallowly.include
shallowly.include方法用于在一个集合中查找特定对象。在chai对数组使用deep.includes方法时，也是要进行一层层的深度遍历，所以我们可以使用shallowly.include来代替默认行为。下面是一些使用案例：
const array1 = [{a: 1}, {b: 2}, {c: 3}]; const array2 = [{a: 1}, {b: 2, c: 3}, {d: 4}]; expect(array1).to.include({a: 1}); // 错误，因为此时需要使用深度比较 expect(array2).to.shallowly.include({b: 2}); // 正确
实际应用
chai-shallowly的运用十分广泛。在React应用的测试时，chai-shallowly非常有用，尤其是在Enzyme的使用过程中。下面是一段React组件的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------- ------ - ------- - ---- --------- ------ ------------- ---- ----------------- ------------------------ ----- ----------- - -- ---- -- -- - --- ------------------------- ---------------- ------ -- - --- ---------------------------- --- ----- -- ---------------------- ---- -- -- - ----- ----- - - ----- - - ----- ----- -- -- - ----- ----- -- - - -- ----- ------- - -------------------- ---------- ---- ---------- ---- --------- ---------------- -- -- - -------------------------------------------------------- --- ---------- ------ ------ -- -- - -------------------------------------- ----- ----- -- --- -------------------------------------- ----- ----- -- --- --- ---展开代码
在这个例子中，我们使用了shallowly.include方法来检查组件是否已正确地渲染。如果使用默认行为深度比较，那么我们无法知道组件是否是正确地渲染，只能知道其渲染完成的数据与预期数据完全相等。
结论
chai-shallowly是一款非常方便的npm包，可以帮助我们在前端开发中更方便地进行数据的遍历和比较。我们可以使用该包来检查数据是否符合结构要求，而不是过于关注数据是否完全相等。使用chai-shallowly可以提高我们对bug的发现效率，节省时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65972
