创建反应应用程序并运行特定文件夹的测试 - Javascript

在本文中，我们将学习如何使用Javascript和React创建一个反应性应用程序并在指定的文件夹中运行测试。

Setting up the environment

为了开始使用React，您需要设置一些必要的工具和环境。首先，您需要安装最新版本的Node.js和npm包管理器。您可以在以下链接中下载和安装它们：

• Node.js
• npm

安装完成后，您可以使用以下命令检查Node.js和npm是否已正确安装：

$ node -v
v10.16.0

$ npm -v
6.9.0

确保它们都返回版本号，在继续使用React之前，您需要全局安装create-react-app工具。

您可以通过以下命令在终端中安装它：

$ npm install -g create-react-app

现在您已准备好在计算机上设置反应性应用程序的环境，我们将其用于本教程。

Creating the React App

在终端中，转到您希望在其中创建反应应用程序的目录，然后运行以下命令：

$ create-react-app my-app

这将创建一个名为“my-app”的全新React项目。

Running Tests in a Specific Folder

为了运行特定文件夹中的测试，您需要安装Jest测试运行器和Enzyme测试工具。这两个工具都可以通过npm安装。

在终端中，切换到React项目的根目录“my-app/”，然后运行以下命令：

$ npm install --save-dev jest enzyme enzyme-adapter-react-16 react-test-renderer

接下来，您需要为您的测试文件创建一个文件夹。在我们的例子中，我们将为测试文件创建一个名为“tests/”的文件夹。

创建一个名为“App.test.js”的新文件并将其保存在“tests/”文件夹中。

import React from 'react';
import { shallow } from 'enzyme';
import App from '../src/App';

describe('App component', () => {
  it('renders without crashing', () => {
    shallow(<App />);
  });
});

这是一个简单的测试文件，测试App组件是否能够正确呈现而不崩溃。这个测试将使用Enzyme测试工具和Jest测试运行器一起运行。

在终端中，转到React项目的根目录“my-app/”，然后运行以下命令运行测试：

$ npm test tests/App.test.js

这将运行“App.test.js”文件中的测试。如果一切正常，测试将通过并显示测试结果。了解更多关于Jest和Enzyme如何工作的信息，请参阅官方文档。

Conclusion

React是一个流行的JavaScript库，让我们能够轻松地构建反应性应用程序。在本文中，我们通过使用Node.js，npm和create-react-app工具在计算机上设置了React应用程序的环境。然后，我们学习了如何使用Jest和Enzyme测试工具来运行测试并在指定的文件夹中进行测试。

以上就是有关如何创建反应应用程序并运行指定文件夹的测试的完整教程。希望这篇文章对您有所帮助，让您开始写出优秀的React应用程序和测试代码。