使用 enzye 检查是否呈现 JavaScript 主题

Enzye 是一个可用于测试 React 组件的 JavaScript 库。它提供了一组用于检查 React 组件渲染的 API。在本篇介绍中，我们将会看到如何使用 Enzye 库来测试是否呈现 JavaScript 主题。

Enzye 安装

在开始之前，您需要通过 NPM 安装 Enzye 库。您可以使用以下命令来安装：

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

以上命令将安装 Enzye、Enzye 适配器和 React Test Renderer。Enzye 适配器是必需的，它提供与 React 16 相关的 API。

测试 JavaScript 主题是否呈现

现在，我们将创建一个测试来检查是否呈现 JavaScript 主题。

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

describe('JavaScriptTopic', () => {
  let container;

  beforeEach(() => {
    container = shallow(<JavaScriptTopic />);
  });

  it('should render', () => { 
    expect(container).toBeTruthy(); 
  });

  it('should display a heading', () => {
    const heading = container.find('h1');
    expect(heading.text()).toEqual('JavaScript');
  });

  it('should display a list of subtopics', () => {
    const subtopics = container.find('ul');
    expect(subtopics.children().length).toEqual(5);
  });
});

在这个示例中，我们导入 React 组件并使用 Enzye 的 shallow 函数创建该组件的包装器。然后我们按照 describe-it 风格的测试套件，分别编写了渲染、标题和子主题测试。

渲染测试检查我们是否成功创建了组件的包装器。标题测试检查我们是否正确的呈现了 JavaScript 主题标题。 最后，子主题测试检查我们是否正确的呈现了五个子主题列表。

总结

Enzye 是一个非常有用的库，它可以帮助我们轻松地测试 React 组件。在这篇介绍中，我们已经看到了如何使用 Enzye 库来测试 JavaScript 主题是否呈现。我们的测试代码包括创建包装器、验证标题和子主题是否呈现的测试。