使用 Enzyme 测试 React 组件时如何使用 “findAllByTestId” 方法-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，我们经常需要对组件进行测试以确保其正常运行。Enzyme 是一个流行的 React 测试工具，它提供了许多有用的方法来测试组件。其中一个方法是 findAllByTestId，它可以帮助我们在测试中查找特定的元素。

什么是 findAllByTestId？

findAllByTestId 是 Enzyme 中的一个方法，它可以通过组件中的 test-id 属性查找元素。它返回一个 Promise，该 Promise 在找到所有匹配的元素后解析为一个数组。如果没有找到匹配的元素，则 Promise 将被拒绝。

例如，如果我们有一个包含 test-id 属性的组件：

function MyComponent() {
  return (
    <div>
      <span data-testid="username">John Doe</span>
      <span data-testid="age">30</span>
    </div>
  );
}

我们可以使用 findAllByTestId 方法来查找包含特定 test-id 的元素：

-- -------------------- ---- -------
------ - ------- - ---- ---------

----------------------- -- -- -
  ---------- ------ --- ------- ---------- ----- -- -- -
    ----- ------- - -------------------- ----
    ----- --------------- - ----- ------------------------------------
    -------------------------------------------- ------
  ---

  ---------- ------ --- ------- ----- ----- -- -- -
    ----- ------- - -------------------- ----
    ----- ---------- - ----- -------------------------------
    ----------------------------------------
  ---
---

这将查找 test-id 为 "username" 和 "age" 的元素，并检查它们是否渲染了正确的文本。

如何使用 findAllByTestId？

使用 findAllByTestId 的基本语法是：

const elements = await wrapper.findAllByTestId('test-id');

其中，wrapper 是 Enzyme 的浅渲染包装器，'test-id' 是要查找的 test-id 属性的值。findAllByTestId 方法返回一个 Promise，该 Promise 在找到所有匹配的元素后解析为一个数组。

在测试中，我们可以使用 Jest 的异步测试功能来等待 Promise 的解析：

it('should do something async', async () => {
  const result = await someAsyncFunction();
  expect(result).toEqual(expectedResult);
});

使用 findAllByTestId 时，我们可以将其与其他 Enzyme 方法一起使用，例如 find 和 simulate：

it('should call onClick when button is clicked', async () => {
  const onClickMock = jest.fn();
  const wrapper = shallow(<MyComponent onClick={onClickMock} />);
  const button = await wrapper.find('button');
  await button.simulate('click');
  expect(onClickMock).toHaveBeenCalled();
});

这将查找 MyComponent 中的 button 元素，并模拟点击行为。然后，我们可以检查 onClickMock 是否已被调用。

结论

findAllByTestId 是一个非常有用的 Enzyme 方法，它可以帮助我们在测试中查找特定的元素。在 React 开发中，测试是非常重要的，因为它可以确保我们的组件在不同的场景下都能够正常运行。使用 findAllByTestId 可以让我们更轻松地编写测试，并确保我们的组件行为符合预期。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67429b06db344dd98ddf4c19