开玩笑创建反应应用程序只运行一个测试 - JavaScript

在编写JavaScript代码时，测试是必不可少的部分。测试允许您在不影响生产代码的情况下检查代码的正确性。 在本文中，我们将介绍如何使用Jest来创建反应应用程序并运行单个测试。

Jest简介

Jest是Facebook开发的一个强大且易于使用的JavaScript测试框架。 它专注于提供简单的API，具有更高的性能和更好的可读性。

创建反应应用程序

首先，我们将创建一个新的React应用程序。 您可以使用create-react-app来创建React应用程序。

npx create-react-app my-app
cd my-app

安装Jest

在我们继续之前，我们需要安装Jest作为项目的一个依赖项。 可以使用npm来安装它。

npm install --save-dev jest

编写测试

在我们编写测试之前，让我们先创建一个非常简单的React组件。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

接下来，在src / directory中创建一个新的文件夹__tests__，在此文件夹中创建一个新文件App.test.js。 然后，我们可以编写一个测试来测试App组件是否正确呈现。

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

test('renders hello world', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/hello world/i);
  expect(linkElement).toBeInTheDocument();
});

在上面的代码中，我们首先导入React和render，它是Jest提供的一个用于呈现React组件的函数。 然后，我们导入App组件并编写一个测试来检查组件是否正确呈现。 测试代码的重点是使用expect断言来检查是否存在Hello World的文本。

运行测试

在我们继续之前，让我们先在package.json文件中添加一些脚本。 这样，我们就可以轻松运行测试。

{
  "scripts": {
    "test": "jest"
  }
}

现在，我们可以运行测试。 可以使用npm test命令来运行测试。

npm test

在测试完成后，Jest将告诉我们测试是否成功或失败。

结论

Jest简化了JavaScript测试过程。 它提供了一个易于使用的API，并具有更高的性能和可读性。 在本文中，我们介绍了如何使用Jest创建一个新的React应用程序并编写一个测试来检查App组件是否正确呈现。 总之，测试是编写高质量代码的重要组成部分，应该成为您日常编码的一部分。