react配置正式和测试_React测试库和测试驱动开发的简介

react配置正式和测试

Recently I have been teaching myself more about Test Driven Development and how to incorporate it in my front-end React applications. I want to share an introduction to what I have learned so far, as I continue to develop my skill.

最近，我一直在自学更多有关测试驱动开发以及如何将其整合到前端React应用程序中的知识。 我想分享对我到目前为止所学知识的介绍，因为我会继续发展自己的技能。

Test Driven Development is a buzzword that a lot of bootcamp students (such as myself) hear throughout their studies, but what does it mean?

测试驱动开发是一个流行词，很多训练营的学生(例如我自己)在整个学习过程中都会听到，但这是什么意思？

Test Driven Development is a methodology in which you write tests for your applications using a testing framework (Mocha, Rspec, Jest, ect.) to test the functionality of your code, before developing the actual code its self. Developers use the failing tests to drive how they develop their code. It has a range of benefits including clarifying a features goals before coding, proving that one’s code meets the necessary requirements, aiding in debugging, cutting out reliance on timely click-through tests, and more.

测试驱动开发是一种方法，您可以在开发实际的代码自身之前，使用测试框架(Mocha，Rspec，Jest等)为应用程序编写测试，以测试代码的功能。 开发人员使用失败的测试来驱动他们开发代码的方式。 它具有一系列好处，包括在编码之前阐明功能目标，证明自己的代码符合必要的要求，帮助调试，消除对及时单击测试的依赖等。

When it comes to developing a React application, a more specialised tool can be very helpful for accurately testing components in an accessible, user-friendly way. Enter React Testing Library. React Testing Library is a tool that empowers React developers to easily test their components in a way very similar to how a user would. It is not a framework nor is it specific to any framework (although it is commonly used with Jest). When create-react-app is used, React Testing Library will already be installed, and the file App.test.js will be created. Alternatively you can install it:

在开发React应用程序时，更专业的工具对于以易于访问，用户友好的方式准确测试组件非常有用。 输入React测试库。 React Testing Library是一种工具，使React开发人员能够以与用户非常相似的方式轻松地测试其组件。 它不是框架，也不是特定于任何框架的(尽管它在Jest中经常使用)。 当使用create-react-app时，已经安装了React Testing Library，并且将创建文件App.test.js。 或者，您可以安装它：

npm install --save-dev @testing-library/react

Once it is installed and the App.test.js file is created in the src folder, you can import the library as well as react and your App.js file if it isn’t already.

安装它并在src文件夹中创建App.test.js文件后，您可以导入该库以及react和您的App.js文件(如果尚未安装)。

import React from 'react';import { render } from '@testing-library/react';import App from './App';

As you can see, we are importing our app component, React, and ‘render’ from the testing library. Render is a method that will allow the test to properly examine the component as a user would. Now that we have everything imported. You can write your first test.

如您所见，我们正在从测试库导入应用程序组件React和“渲染”。 渲染是一种方法，它允许测试像用户一样正确地检查组件。 现在我们已经导入了所有内容。 您可以编写第一个测试。

test('App renders "Hello, World!"', () => {const { getByText } = render(<App />);expect(getByText("Hello, World!")).toBeInTheDocument();});

In the code above, you can see we are declaring a test, and giving the test a name that describes what we are testing for. The syntax is very similar to a standard Javascript function. On the next line, we grab getByText and use ‘render’ from our import, to render our app component. GetByText allows us to tell our test to find a specific text in whats rendered to a user. The final line is quite readable, and this is where our actual test comes in. We “expect” that “Hello, World!” will “be in the document”. Since we want to test that we can find that text, we wrap our text in “getByText”.

在上面的代码中，您可以看到我们正在声明一个测试，并为测试指定一个名称，该名称描述了我们要测试的内容。 语法与标准Javascript函数非常相似。 在下一行，我们获取getByText并从导入中使用“ render”来呈现我们的应用程序组件。 GetByText允许我们告诉测试以呈现给用户的内容查找特定文本。 最后一行很容易阅读，这就是我们进行实际测试的地方。我们“期望”“ Hello，World！” 将“在文档中”。 由于我们要测试是否可以找到该文本，因此将文本包装在“ getByText”中。

Now if we run our test suite, without having written any code in our App.js file, we will see that the test will fail. To view this, run the following command:

现在，如果我们运行测试套件，而未在App.js文件中编写任何代码，我们将看到测试将失败。 要查看此信息，请运行以下命令：

npm test

So we now know that we want our app to render “Hello, World!” to a user, and we know that it is not. We can now go into our App.js file and try to pass this test.

现在我们知道我们希望我们的应用程序渲染“ Hello，World！” 给用户，我们知道事实并非如此。 现在，我们可以进入App.js文件并尝试通过此测试。

import React from 'react'const App = () => {
   return (
      <div>
        <h1>Hello, World!</h1>
      </div>
}export default App

Now if we run the test command in our terminal again, we will see it is passing! This is the most bare bones example of Test Driven Development.

现在，如果再次在终端中运行test命令，我们将看到它已通过！ 这是测试驱动开发的最简单的例子。

React Testing Library is quite flexible and friendly. It allows you to test what your app should be rendering, and it can simulate user interactions such as filling in inputs, clicking buttons, traversing pages, and more! It is a great library to aide you in developing how a user will interact with your app, and I recommend the next time you start a React project, you employ Test Driven Development as you build out your components.

React Testing库非常灵活且友好。 它允许您测试应用程序应呈现的内容，并可以模拟用户交互，例如填写输入，单击按钮，遍历页面等等！ 这是一个很棒的库，可以帮助您开发用户如何与应用程序交互，并且我建议您下次启动React项目时，在构建组件时采用Test Driven Development。

翻译自: https://medium.com/dev-genius/an-introduction-to-react-testing-library-and-test-driven-development-e55daf0a866d

react配置正式和测试