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

react jest测试

by Sam Ollason

通过萨姆·奥拉森(Sam Ollason)

This short article shares my experiences setting up my testing environment to unit test React Native components with Jest and Enzyme.

这篇简短的文章分享了我设置测试环境以使用Jest和Enzyme对React Native组件进行单元测试的经验。

测试工具和环境 (Testing tools and environment)

The first thing I learnt was the approach and infrastructure for writing unit tests for a React Native app are very similar to writing unit tests for a React app…perhaps unsurprisingly.

我学到的第一件事是为React Native应用程序编写单元测试的方法和基础架构与为React应用程序编写单元测试非常相似……也许不足为奇。

However, while the tooling and the use of the test suites are very similar, the testing environment and infrastructure have to be set up in a slightly different way. This is essentially because React apps are designed to work with the DOM inside a browser whereas mobile apps don’t target this data structure for rendering (they target actual ‘native’ modules that are on the mobile system instead).

但是，尽管测试套件的工具和使用方法非常相似，但测试环境和基础结构必须以稍微不同的方式进行设置 。 这主要是因为React应用程序旨在与浏览器中的DOM一起使用，而移动应用程序并不针对此数据结构进行渲染(它们针对的是移动系统上的实际“本机”模块)。

使用笑话 (Using Jest)

Jest is a library used for testing JavaScript apps.

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

I wanted to use Jest for several reasons:

我想使用Jest有以下几个原因：

Firstly, it was created and is actively maintained by Facebook for their own React Native apps.

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

Secondly, it comes pre-packaged with the version of React Native I was working with (created using react-native).

其次，它预先打包了我正在使用的React Native版本(使用react-native创建)。

Thirdly, Jest is a ‘comprehensive’ testing framework and contains the whole suite of testing tools I needed. For example, Jest comes with a library to check assertions, a test runner to actually run tests and tools to check code coverage. With other solutions, one has to choose and assemble individual components of a testing suite.

第三， Jest是一个“综合”测试框架 ，其中包含我需要的整套测试工具。 例如，Jest附带了一个用于检查断言的库，一个用于实际运行测试的测试运行器以及用于检查代码覆盖率的工具。 对于其他解决方案，必须选择并组装测试套件的各个组件。

使用笑话+酶 (Using Jest + Enzyme)

I wanted to combine Jest and Enzyme. There are lots of slightly confusing comments on the web that compare ‘Jest versus Enzyme’. This is a bit misleading. While Jest is a testing framework you can think of Enzyme as a library that makes it easier to select and query elements inside of an emulated DOM. So it is often used alongside Jest to make writing the logic of tests cleaner and easier to read.

我想结合Jest和Enzyme。 网络上有很多比较混乱的评论，它们将“笑话与酶”进行了比较。 这有点误导。 尽管Jest是一个测试框架，但是您可以将Enzyme视为一个库，它使在模拟DOM中选择和查询元素更加容易。 因此， 它经常与Jest一起使用，以使编写测试逻辑更清晰，更易于阅读。

Still confused? It’s similar to how jQuery introduced a concise and clear syntax for querying and selecting elements in the DOM, whereas the syntax using vanilla JavaScript was (at least back when jQuery was first introduced) not as clear and easy to use. And people don’t often compare ‘jQuery versus JavaScript’, unless they are comparing a particular way that the two approaches use to query and modify elements of the DOM.

还是很困惑？ 这类似于jQuery引入简洁明了的语法来查询和选择DOM中的元素的方式，而使用香草JavaScript的语法(至少是在首次引入jQuery时)不那么清晰且易于使用。 人们通常不会比较“ jQuery与JavaScript”，除非他们正在比较两种方法用于查询和修改DOM元素的特定方式。

Note: you can use Jest without Enzyme (I believe Facebook does this) but Enzyme makes your tests a bit easier to create and read. From my perspective, combining Enzyme with Jest is about convenience.

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

设置Jest +酶 (Setting up Jest + Enzyme)

I had to jump through some hoops to successfully setup Jest and Enzyme in my React Native environment.

我必须跳过一些步骤才能在我的React Native环境中成功设置Jest和Enzyme。

Jest now comes included with React Native apps created using the ‘react-native’ tool. So I could use Jest out of the box. Wonderful!

Jest现在包含在使用“ react-native”工具创建的React Native应用程序中。 所以我可以直接使用Jest。 精彩！

But I ran into some problems trying to combine Enzyme with React Native using their documentation. I never quite got to the bottom of what was the underlying problem, but I kept getting ‘modules not found’ errors like this one here.

但是我尝试使用他们的文档将Enzyme和React Native结合在一起时遇到了一些问题。 我从来没有完全得到了什么是根本问题的底部，但我一直得到“模块未找到”的错误这样的一个位置 。

一个办法 (A solution)

In the end I used a solution that essentially abstracts away some of the setup into a pre-packaged environment using the jest-enzyme library and then made sure the jest ‘presets’ was set to ‘react-native’ in my package.json.

最后，我使用了一种解决方案，该解决方案实际上是使用jest-enzyme库将某些设置抽象到预打包的环境中，然后确保在package.json中将jest的“ presets”设置为“ react-native”。

I followed the instructions to install these libraries:

我按照说明安装了这些库：

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

Errors when I tried to run my tests also directed me to explicitly install these myself too:

当我尝试运行测试时出现的错误也指示我自己也明确安装这些错误：

npm install --save-dev react-dom enzyme

Here is what I had to manually add to package.json:

这是我必须手动添加到package.json的内容：

// package.json before with react-native init

{
...
   "jest": {
       "presets": ["react-native"],
     }
...
}

// package.json after my manual changes:
{
...

"jest": {
       "presets": ["react-native"], // not clear in documentation!
       "setupTestFrameworkScriptFile": "jest-enzyme",
       "testEnvironment": "enzyme",
       "testEnvironmentOptions": {
           "enzymeAdapter": "react16"
       }  
   }
...
}

You can see the repo here.

您可以在此处查看回购。

Using the jest-enzyme library in this way worked easily for me and it also meant that I had a slightly cleaner setup. This is because the other approach (that I couldn’t get to work, following the Enzyme documentation) would have meant I also had to set up and maintain a separate ‘jest config’ script.

以这种方式使用jest酶库对我来说很容易，这也意味着我的安装程序稍微清洁了一些。 这是因为另一种方法(按照酶文档，我无法上班)将意味着我还必须设置并维护单独的“ jest config”脚本。

摘要 (Summary)

Writing business logic inside of Jest+Enzyme tests for React Native seems to be exactly the same as writing tests for React using Jest+Enzyme. This means the examples and documentation online for React unit testing are easily transferrable, which is really useful. This is a great step towards the vision of web developers being able to easily transfer their skills to create cross-platform mobile apps.

在Jest + Enzyme测试中为React Native编写业务逻辑似乎与使用Jest + Enzyme为React编写测试完全相同。 这意味着在线上用于React单元测试的示例和文档很容易转移，这确实很有用。 这是朝着使Web开发人员能够轻松地转移其技能来创建跨平台移动应用程序的愿景迈出的重要一步。

However, for the ease-of-use in the ‘test writing’ phase, I paid the price when setting up the infrastructure and environment so that the various tools were compatible with my React Native ecosystem.

但是，为了在“测试编写”阶段中易于使用，我在设置基础架构和环境时付出了代价，以便各种工具与我的React Native生态系统兼容。

In addition, from coming across Github issues in this area, it seems like there are lots of small instabilities between React Native versions that makes it really hard to find out what is the underlying cause of an infrastructure problem like the ones I described above. But I suppose we can’t have flexibility in such a fast-moving space as this without some challenges.

此外，从遇到该领域的Github问题来看，React Native版本之间似乎存在许多小的不稳定性，这使得真的很难找出导致基础设施问题的根本原因是什么，如上所述。 但是我想，在这样一个快速发展的空间中，如果没有一些挑战，我们将无法拥有灵活性。

Here is the repo with my jest-enzyme setup with a few example tests.

这是带有我的Jest酶设置的仓库，并带有一些示例测试。

I hope you found this interesting and useful! Please feel free to add any questions or comments below.

希望您觉得这个有趣和有用！ 请随时在下面添加任何问题或评论。

翻译自: https://www.freecodecamp.org/news/setting-up-jest-enzyme-for-testing-react-native-40393ca04145/

react jest测试