这篇简短的文章分享我的经验设置测试环境单元测试本机组件与笑话反应和酶。

测试工具和环境

我学会的第一件事是编写单元测试的方法和基础设施对于一个本地应用反应为反应非常类似于编写单元测试程序…也许毫不奇怪。

然而,工具和测试套件的使用非常相似,测试环境和基础设施必须建立在一个稍微不同的方式。这就是因为反应应用设计与DOM在浏览器而移动应用不目标这个数据结构呈现(他们目标实际“本地”模块上的移动系统相反)。

使用开玩笑

开玩笑图书馆是一个用于测试JavaScript应用程序。

我想用笑话有几个原因:

首先,它是由Facebook创建,并积极维护自己的本地应用的反应。

其次,谈到预包装的版本反应本地处理(创建使用react-native)。

第三,笑话是一个全面的测试框架整个测试工具套件,包含我所需要的。例如,笑话附带了一个图书馆检查断言,一个测试运行器实际运行测试和检查代码覆盖工具。与其他解决方案,必须选择和组装单个组件的测试套件。

使用笑话+酶

我想把笑话和酶。有很多略混淆网络评论的比较“笑话与酶”。这是有点误导。虽然笑话是一个测试框架可以认为酶是一个图书馆,让它更容易选择和查询元素内部的模拟DOM。所以通常使用与笑话使编写的逻辑测试更干净、更容易阅读。

仍然困惑吗?类似的是,jQuery引入了一个简洁和清晰的语法查询并选择DOM元素,而语法使用香草JavaScript(至少在jQuery首次引入)不清晰和易于使用。和人们不经常比较jQuery和JavaScript,除非他们正在比较这两种方法的一种特殊表达方式,用来查询和修改DOM元素。

注意:你可以用玩笑没有酶(我相信Facebook这样),但酶使你的测试更容易创建和阅读。从我的角度来看,酶结合Jest是方便。

设置笑话+酶

我必须跳过一些步骤成功设置开玩笑和酶反应在我本地的环境。

Jest现在包含在本地应用反应使用“react-native”工具创建的。所以我可以用玩笑的。太棒了!

但是我遇到了一些问题想结合酶与本机使用他们的反应文档。我从未得到的根本问题是什么,但我越来越模块没有找到像这样的错误在这里。

一个解决方案

最后我使用解决方案本质上是抽象出的一些设置到预包装的环境中使用jest-enzyme库,然后确保开玩笑“预设”是我package.json设置为“react-native”。

我跟着指示来安装这些库:

npm安装jest-environment-enzyme jest-enzyme enzyme-adapter-react-16——save-dev

错误当我试图运行测试还指导我自我明确安装这些:

npm安装——save-dev react-dom酶

这就是我必须手动添加package.json:

/ /包。json在react-native init{
…
“笑话”:{
“预设”:“react-native”,
}
…
}/ /包。json在我手动更改:{
…“笑话”:{
“预设”:“react-native”,在文档/ /不清楚!
:“setupTestFrameworkScriptFile jest-enzyme”,
“testEnvironment”:“酶”,
" testEnvironmentOptions ": {
:“enzymeAdapter react16”
}
}
…
}

你可以看到回购在这里。

以这种方式使用jest-enzyme库轻松地为我工作,这也意味着我有一个简单的设置。这是因为其他方法(我找不到工作,后酶文档)意味着我还必须建立和维护一个单独的jest配置的脚本。

总结

编写业务逻辑的内部笑话+酶反应测试本机似乎一模一样编写测试使用笑话+酶反应。这意味着这些示例和文档在线反应单元测试很容易可转换的,这是非常有用的。这是一个很好的一步的web开发人员能够轻松地转移他们的技能来创建跨平台的移动应用程序。

然而,对于易用性测试写作的阶段,我付出了代价,建立基础设施和环境,各种工具是我反应原生生态系统兼容。

此外,从穿过Github问题在这一领域,似乎有很多小反应本地版本之间的不稳定,使得它很难发现的根本原因是什么像我上面描述的基础设施问题。但是我想我们不能有这样的一个快速移动的空间的灵活性,没有一些挑战。

在这里是我jest-enzyme回购与设置一些示例测试。

我希望你发现了这个有趣的和有用的!请添加下面的任何问题或意见。