使用@testing-library/vue 禁用元素时无法正确测试输入复选框

Question

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

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

对于最后两个块，我正在尝试相同的 check/uncheck 但现在我将属性 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

Answer 1

你可以看到testing-librarygithub中有一个类似的issue正是你的问题

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

user-event tries to simulate the real events that would happen in the browser as the user interacts with it. For example userEvent.click(checkbox) would change the state of the checkbox.

您可以在this link.

访问@testing-library/user-eventgithub

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

所以首先你应该使用 npm install --save-dev @testing-library/user-event.
安装它
然后在测试的顶部导入它import userEvent from "@testing-library/user-event";
将每个 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
});

使用@testing-library/vue 禁用元素时无法正确测试输入复选框

Can't test the input checkbox properly when the element is disabled using @testing-library/vue

vue.js

jestjs

testing-library

jest-dom

vue-testing-library