vscode编写react_编写您的第一个React集成测试

vscode编写react

When you are new to testing, it can feel daunting. Learning how to write integration tests for React applications is not easy. Most tutorials out there deal with simple “hello world” type scenarios and don’t test the kinds of applications that you will be building and testing in the real world.

当您不熟悉测试时，可能会感到畏缩。 学习如何编写React应用程序的集成测试并不容易。 那里的大多数教程都处理简单的“ hello world”类型的场景，并且不测试您将在现实世界中构建和测试的应用程序的种类。

When we test with React-Testing-Library, we are encouraged to write tests that are user-centric and are not tied to the implementation details of the application.

当我们使用React-Testing-Library进行测试时，鼓励我们编写以用户为中心并且与应用程序实现细节无关的测试。

To put this into practice, let’s write tests for an application that we did not write ourselves. An application that we are not familiar with. This will encourage us to write user-centric tests.

为了付诸实践，让我们为一个我们自己没有编写的应用程序编写测试。 我们不熟悉的应用程序。 这将鼓励我们编写以用户为中心的测试。

入门 (Getting started)

Let’s start by forking Calculator, an example React application. I found it by browsing the React examples page. The application was created by Andrew Farmer and currently has around 700 stars on Github. We can see the application in action here.

让我们从分叉Calculator (一个示例React应用程序)开始。 我通过浏览React示例页面找到了它。 该应用程序是由Andrew Farmer创建的，目前在Github上已有700颗星。 我们可以在这里看到正在运行的应用程序。

The calculator application

计算器应用

入门(Getting started)

Let’s start by forking the application, and clone it to our local machine. Click the “fork” button on Github, and once finished, click on clone, and copy the command into your terminal. For me, it looked like this

让我们从分叉应用程序开始，然后将其克隆到我们的本地计算机上。 单击Github上的“ fork”按钮，完成后，单击克隆，然后将命令复制到您的终端中。 对我来说，看起来像这样

git clone git@github.com:montezume/calculator.git

Next, let’s open up the application in our favourite text editor and take a look. Looking inside the src directory, we see a structure like this.

接下来，让我们在我们最喜欢的文本编辑器中打开该应用程序并进行查看。 在src目录中，我们看到这样的结构。

App.js
Button.js
ButtonPanel.js
Display.js

Since we will be testing like users, we don’t actually care what the code structure is like. We will only test App.js, we won’t individually test Button.js, or Display.js, because users don’t use components in isolation.

由于我们将像用户一样进行测试，因此我们实际上并不关心代码结构是什么样的。 我们将仅测试App.js ，而不会单独测试Button.js或Display.js ，因为用户不会孤立地使用组件。

We also see that there is one existing test, in App.test.js. Let’s open it up and take a look.

我们还看到App.test.js中存在一个现有测试。 让我们打开它，看看。

现有测试 (The existing test)

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
});

As we can see, all there is in an infamous “renders without crashing” test. We can do better.

如我们所见，臭名昭著的“不用崩溃就可以渲染”测试中的所有内容。 我们可以做得更好。

** NOTE: there are tests for the logic inside of the calculate.test.js file. I am not writing this article to disparage Andrew’s work, only to show how we can write user-based tests.

**注意： calculate.test.js文件中包含对逻辑的测试。 我写这篇文章并不是为了贬低安德鲁的工作，只是为了展示我们如何编写基于用户的测试。

设置测试库 (Setting up testing-library)

After cloning the application, I installed our testing library dependencies by running the following command.

克隆应用程序后，我通过运行以下命令安装了测试库依赖项。

yarn add -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

And I created a file called src/setupTests.js and pasted in the following

我创建了一个名为src/setupTests.js的文件，并将其粘贴到以下文件中

// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import "@testing-library/jest-dom/extend-expect";

Now we can use testing library with the calculator application.

现在，我们可以将测试库与计算器应用程序一起使用。

编写我们的第一个测试 (Writing our first test)

We can start by replacing the existing App.test.js with the following boilerplate test that uses testing library. However, it’s not much better than the existing test. All we are checking is that the App is properly rendering some text.

我们可以使用以下使用测试库的样板测试来替换现有的App.test.js。 但是，它并不比现有测试好多少。 我们正在检查的只是该应用程序是否正确呈现了一些文本。

We can run our test by running yarn test and we see that it passes. Let’s move on to testing some more complicated interactions.

我们可以通过运行yarn test来运行我们的测试，我们看到它通过了。 让我们继续测试一些更复杂的交互。

测试互动 (Testing interactions)

As a user, the reason I use a calculator is to do calculations. So let’s write a test for a simple calculation. I want to test that if you click the “7” button, and then the multiply button, and then the “5” button, and finally the equals button, the calculator correctly calculates that 5 times 7 is 35.

作为用户，我使用计算器的原因是进行计算。 因此，让我们编写一个用于简单计算的测试。 我想测试一下，如果您单击“ 7”按钮，然后单击“乘”按钮，然后单击“ 5”按钮，最后单击“等于”按钮，则计算器正确计算出5乘以7是35。

As you can see, here we use userEvent to click our buttons, and finally, we use getByText to assert that the correct calculated value is displayed to the user.

如您所见，这里我们使用userEvent单击按钮，最后使用getByText断言向用户显示了正确的计算值。

Let’s try the same thing, but this time with division. We will divide 100 by 5, and assert that the calculator correctly calculates 20.

让我们尝试同样的事情，但这一次是分开的。 我们将100除以5，并断言计算器正确计算了20。

As you can see, the test is almost identical to our previous test. It’s important to keep in mind that we are testing like users. We aren’t mocking anything, we aren’t testing components. We are clicking buttons, and asserting that we see values on the screen. I could completely rewrite this application, and my tests will still pass.

如您所见，该测试几乎与我们之前的测试相同。 请记住，我们正在像用户一样进行测试，这一点很重要。 我们没有嘲笑任何东西，我们没有测试组件。 我们正在单击按钮，并断言我们在屏幕上看到了值。 我可以完全重写此应用程序，并且我的测试仍将通过。

Let’s add one final test. Now I want to test that when I add -5 to 2 I get -3.

让我们添加一个最终测试。 现在我想测试一下，当我将-5加到2得到-3 。

In this test, we go one step farther by testing the functionality of the AC button. After asserting that we correctly calculate the answer -3, we use queryByText to assert that after clicking AC, we no longer see -3 in the document.

在此测试中，我们通过测试AC按钮的功能进一步前进了一步。 在断言我们正确计算了答案-3 ，我们使用queryByText断言在单击AC之后，我们在文档中不再看到-3 。

整理东西 (Wrapping things up)

As you can see, these tests are easy to write and easy to read. We were able to write tests that cover most of the functionality of an application that we didn’t write. I didn’t even look into the logic directory or look at the internals of the application. All we did was look at the UI, and then we wrote tests based on that.

如您所见，这些测试易于编写和阅读。 我们能够编写涵盖我们未编写的应用程序大多数功能的测试。 我什至没有查看logic目录，也没有查看应用程序的内部。 我们所做的只是查看UI，然后我们基于该UI编写了测试。

I hope this exercise helped you learn a little bit more about testing React applications. Let us know in the comments if you have any questions. If you would like to see the repository, you can find it on Github.

我希望这个练习可以帮助您学习更多有关测试React应用程序的知识。 如果您有任何疑问，请在评论中告诉我们。 如果您想查看存储库，可以在Github上找到它。

翻译自: https://medium.com/frontend-digest/write-your-first-react-integration-test-1721a8173ade

vscode编写react