0

我正在尝试为复选框组件创建一些测试，但看起来我无法断言input[type="checkbox"]何时被禁用。

在前两个块中，我正在测试复选框是否可以选中/取消选中元素是否被禁用，这里一切正常。

对于最后两个块，我正在尝试相同的方法来检查/取消选中，但现在我将属性设置disabled为元素，但看起来库忽略了属性

这是我的测试

import { fireEvent, render, screen } from '@testing-library/vue';

it('should uncheck if is not disabled', async () => {
  render({
    template: '<input data-test-id="checkbox" type="checkbox" checked />',
  });

  const el = screen.getByTestId('checkbox');

  await fireEvent.click(el);

  expect(el).not.toBeDisabled();
  expect(el).not.toBeChecked();
});

it('should check if is not disabled', async () => {
  render({
    template: '<input data-test-id="checkbox" type="checkbox" />',
  });

  const el = screen.getByTestId('checkbox');

  await fireEvent.click(el);

  expect(el).not.toBeDisabled();
  expect(el).toBeChecked();
});

it('should not uncheck if is disabled', async () => {
  render({
    template: '<input data-test-id="checkbox" type="checkbox" checked disabled />',
  });

  const el = screen.getByTestId('checkbox');

  await fireEvent.click(el);

  expect(el).toBeDisabled();
  expect(el).toBeChecked(); // ! FAIL
});

it('should not check if is disabled', async () => {
  render({
    template: '<input data-test-id="checkbox" type="checkbox" disabled />',
  });

  const el = screen.getByTestId('checkbox');

  await fireEvent.click(el);

  expect(el).toBeDisabled();
  expect(el).not.toBeChecked(); // ! FAIL
});

和控制台输出

 FAIL  Checkbox.spec.js
  ✓ should uncheck if is not disabled (24ms)
  ✓ should check if is not disabled (3ms)
  ✕ should not uncheck if is disabled (5ms)
  ✕ should not check if is disabled (3ms)

  ● should not uncheck if is disabled

    expect(element).toBeChecked()

    Received element is not checked:
      <input checked="checked" data-test-id="checkbox" disabled="disabled" type="checkbox" />

      37 |
      38 |   expect(el).toBeDisabled();
    > 39 |   expect(el).toBeChecked(); // ! FAIL
         |              ^
      40 | });
      41 |
      42 | it('should not check if is disabled', async () => {

      at Object.<anonymous> (Checkbox.spec.js:39:14)

  ● should not check if is disabled

    expect(element).not.toBeChecked()

    Received element is checked:
      <input data-test-id="checkbox" disabled="disabled" type="checkbox" />

      50 |
      51 |   expect(el).toBeDisabled();
    > 52 |   expect(el).not.toBeChecked(); // ! FAIL
         |                  ^
      53 | });
      54 |

      at Object.<anonymous> (Checkbox.spec.js:52:18)

Test Suites: 1 failed, 1 total
Tests:       2 failed, 2 passed, 4 total
Snapshots:   0 total
Time:        1.707s, estimated 3s
4

1 回答 1

1

您可以看到 github 中有一个类似的问题，testing-library这正是您的问题。

根据user-event文档，您应该使用userEvent而不是fireEvent：

user-event 试图模拟用户与浏览器交互时会在浏览器中发生的真实事件。例如 userEvent.click(checkbox) 会改变复选框的状态。

您可以在此链接中访问@testing-library/user-event github 。

所以请按照以下步骤操作：

  1. 所以首先你应该使用npm install --save-dev @testing-library/user-event.

  2. 然后在测试的顶部导入它import userEvent from "@testing-library/user-event";

  3. 将每个替换fireEvent为userEvent.

最终代码是这样的：

import { fireEvent, render, screen } from "@testing-library/vue";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";

it("should uncheck if is not disabled", async () => {
  render({
    template: '<input data-testid="checkbox" type="checkbox" checked />',
  });

  const el = screen.getByTestId("checkbox");

  await userEvent.click(el);

  expect(el).not.toBeDisabled();
  expect(el).not.toBeChecked();
});

it("should check if is not disabled", async () => {
  render({
    template: '<input data-testid="checkbox" type="checkbox" />',
  });

  const el = screen.getByTestId("checkbox");

  await userEvent.click(el);

  expect(el).not.toBeDisabled();
  expect(el).toBeChecked();
});

it("should not uncheck if is disabled", async () => {
  render({
    template:
      '<input data-testid="checkbox" type="checkbox" checked disabled />',
  });

  const el = screen.getByTestId("checkbox");

  // await userEvent.click(el);

  console.log(el.checked);

  expect(el).toBeDisabled();
  expect(el).toBeChecked(); // ! FAIL
});

it("should not check if is disabled", async () => {
  render({
    template: '<input data-testid="checkbox" type="checkbox" disabled />',
  });

  const el = screen.getByTestId("checkbox");

  await userEvent.click(el);

  expect(el).toBeDisabled();
  expect(el).not.toBeChecked(); // ! FAIL
});
于 2021-10-08T16:18:26.443 回答