使用 Enzyme 测试 React 组件时如何使用 “not.toBe” 方法进行测试

React 组件的测试是前端开发中重要的一环。Enzyme 是一个流行的 React 组件测试工具，可以让开发者轻松地测试组件的渲染、交互和行为。在测试过程中，我们经常需要使用断言来验证组件是否按照预期工作。其中，not.toBe 方法是一个常用的断言方法，可以帮助我们检查某些值是否不等于预期值。在本文中，我们将介绍如何使用 not.toBe 方法进行 Enzyme 测试，并提供一些示例代码以帮助你更好地理解。

not.toBe 方法的使用

not.toBe 方法是 Jest 断言库中的一个方法，它可以用于验证某个值是否不等于预期值。具体来说，它可以检查两个值是否不相等，以及是否具有不同的类型。例如，我们可以使用 not.toBe 方法来检查组件的状态值是否不等于预期值：

it('should not render the button when disabled', () => {
  const wrapper = shallow(<MyButton disabled={true} />);
  expect(wrapper.find('button')).not.toBeDisabled();
});

在上面的代码中，我们使用 not.toBeDisabled 方法来检查按钮是否未被禁用。如果按钮被禁用，那么这个测试用例将会失败。

除了 not.toBeDisabled 方法，Jest 还提供了许多其他的 not.toBe 方法，例如：

• not.toBeFalsy()：检查值是否不是 falsy 值（例如 0、false、undefined、null 等）。
• not.toBeGreaterThan()：检查值是否不大于指定值。
• not.toBeInstanceOf()：检查值是否不是指定类的实例。

示例代码

下面是一个使用 not.toBe 方法进行测试的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';

import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render the component with the correct props', () => {
    const props = {
      name: 'John',
      age: 30,
    };

    const wrapper = mount(<MyComponent {...props} />);

    expect(wrapper.find('h1').text()).not.toBe('Hello, World!');
    expect(wrapper.find('h2').text()).toBe(`My name is ${props.name}`);
    expect(wrapper.find('p').text()).toBe(`I am ${props.age} years old`);
  });
});

在上面的代码中，我们使用 not.toBe 方法来检查组件的 h1 元素是否不等于 'Hello, World!'。如果 h1 的文本内容为 'Hello, World!'，那么这个测试用例将会失败。

总结

在本文中，我们介绍了如何使用 not.toBe 方法进行 Enzyme 测试。这个方法可以帮助我们验证组件的各种属性、状态和行为是否符合预期。在实际开发中，我们可以根据具体的需求选择适合自己的断言方法，以确保测试用例的准确性和有效性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d2f2ad2f5e1655d7fb89b