如何设置Jest和Enzyme来测试React Native应用

292 阅读4分钟

这篇短文分享了我建立测试环境的经验,用Jest和Enzyme对React Native组件进行单元测试。

测试工具和环境

我学到的第一件事是为React Native应用编写单元测试的方法和基础设施与为React应用编写单元测试非常相似......也许这并不令人惊讶。

然而,虽然工具和测试套件的使用非常相似,但测试环境和基础设施必须以稍微不同的方式设置。这主要是因为React应用程序被设计为与浏览器内的DOM一起工作,而移动应用程序不以这种数据结构为目标进行渲染(它们以移动系统上的实际 "本地 "模块为目标)。

使用Jest

Jest是一个用于测试JavaScript应用程序的库。

我想使用Jest有几个原因:

首先,它是由Facebook为他们自己的React Native应用创建并积极维护的。

其次,它与我所使用的React Native版本(使用react-native创建)预先打包。

第三,Jest是一个 "全面 "的测试框架,包含我需要的整套测试工具。例如,Jest有一个检查断言的库,一个实际运行测试的测试运行器和检查代码覆盖率的工具。对于其他的解决方案,人们必须选择和组装测试套件的单个组件。

使用Jest + Enzyme

我想把Jest和Enzyme结合起来。网络上有很多略显混乱的评论,将 "Jest与Enzyme "进行比较。这有点误导。虽然Jest是一个测试框架,但你可以把Enzyme看作是一个库,它使你更容易选择和查询模拟DOM中的元素。因此,它经常与Jest一起使用,使测试逻辑的编写更简洁,更容易阅读。

还在迷惑吗?这类似于jQuery为查询和选择DOM中的元素引入了一个简洁明了的语法,而使用vanilla JavaScript的语法(至少在jQuery刚推出时)并不那么清晰和容易使用。而且人们并不经常比较 "jQuery和JavaScript",除非他们比较的是这两种方法用来查询和修改DOM元素的特定方式。

注意: 你可以在没有Enzyme的情况下使用Jest(我相信Facebook是这样做的),但Enzyme使你的测试更容易创建和阅读。从我的角度来看,将Enzyme和Jest结合起来是为了方便。

设置Jest + Enzyme

我不得不跳过一些障碍,在我的React Native环境中成功设置Jest和Enzyme。

Jest现在包含在使用 "react-native "工具创建的React Native应用中。所以我可以开箱即用Jest。太棒了

但我在尝试使用他们的文档将Enzyme与React Native结合起来时遇到了一些问题。我一直没有找到问题的根源,但我一直遇到 "找不到模块 "的错误,比如这里

一个解决方案

最后,我使用了一个解决方案,基本上把一些设置抽象成一个预先包装好的环境,使用jest-enzyme库,然后确保jest的 "预设 "在我的package.json中被设置为 "react-native"。

我按照说明来安装这些库:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

当我试图运行我的测试时,错误也指示我自己明确安装这些:

npm install --save-dev react-dom enzyme

以下是我不得不手动添加到package.json中的内容:

// package.json before with react-native init
{
// package.json after my manual changes:
{
"jest": {

你可以在这里看到repo。

以这种方式使用jest-enzyme库对我来说很容易,这也意味着我有一个稍微干净的设置。这是因为其他的方法(按照Enzyme的文档,我无法工作)意味着我还必须建立和维护一个单独的 "jest config "脚本。

总结

在Jest+Enzyme测试中为React Native编写业务逻辑似乎与使用Jest+Enzyme为React编写测试完全一样。这意味着网上的React单元测试的例子和文档很容易转移,这真的很有用。这是朝着网络开发者能够轻松地将他们的技能转移到创建跨平台移动应用程序的愿景迈出的一大步。

然而,对于 "测试编写 "阶段的易用性,我在设置基础设施和环境时付出了代价,以便各种工具与我的React Native生态系统兼容。

此外,从接触到这方面的Github问题来看,React Native版本之间似乎有很多小的不稳定因素,这使得我们真的很难找出像我上面描述的基础设施问题的根本原因所在。但我想,在这样一个快速发展的领域,如果没有一些挑战,我们就不可能有灵活性。

这里是我的jest-enzyme设置的 repo,有一些测试的例子。