如何使用 className 和 fireClickEvent 测试元素

Question

JavaScript 测试和代码库的新手。

我有以下渲染元素，其行为类似于手风琴（这是所有其他类和样式的条纹，我相信不需要理解）：

 <div>
    <ul>
      <li>
         <div>
            Title 1
            <div>
                <i class="icon_right">
                ...
                </i>
            </div>
         </div>
         <div>
            Text 1
         </div>
      </li>
      <li>
        <div>
            Title 2
            <div>
                <i class="icon_right">
                ...
                </i>
            </div>
         </div>
         <div>
            Text 2
         </div>
      </li>
    </ul>
</div>

我想验证带有类 icon_right 的元素是否存在，或者该类是否存在 2 次（并且可能它们是否与这些标题相关联）。我试过了：

• expect(container).toHaveClass('icon_right'); »结果：（什么也没有？）
• expect(container.querySelector('[class*="icon_right"]')).toBeInTheDocument(); »结果：值：空
• expect(container.getElementByClassName('icon_right')[0]).toBeInTheDocument(); »» 结果：未定义

我认为这里的问题可能是因为它位于许多其他元素内部，但不确定。请赐教。

此外，另一个测试是单击“标题 1”并验证是否显示“文本 1”。为此我尝试过：

await fireEvent.click(screen.queryAllByText('Title 1')[0]);
expect(screen.getByText('Text 1')).toBeInTheDocument();

错误是“无法触发“点击”事件 - 请提供 DOM 元素”。问题是：我从另一个元素上完成的另一个成功测试中复制了它，并且，如果我只是尝试从屏幕上获取它并且它被渲染，它如何/为什么不起作用？

Answer 1

我只是 querySelectorAll('.icon_right') -> 这将返回节点集合。然后只需检查 collection.length 与您的预期结果即可。

Answer 2

您可以尝试将

data-testid

添加到图标元素中。

<li>
  <div>
    Title 1
    <div>
      <i data-testid="icon" className="icon_right"></i>
    </div>
  </div>
  <div>Text 1</div>
</li>

测试可能是这样的：

import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import Accordeon from "../Accordeon";

describe("all tests", () => {
  it("should work", async () => {
    render(<Accordeon />);
    const title1Element = screen.getByText("Title 1");
    fireEvent.click(title1Element);
    await waitFor(() => { // most probably we need to wait for element to be visible but it is just a guess as I cannot see the code
      expect(screen.getByText("Text 1")).toBeInTheDocument();
    });
  });

  it('should find icon', () => {
    render(<Accordeon />);
    const title1Element = screen.getByText("Title 1");
    const icon = within(title1Element).getByTestId('icon');
    expect(icon).toBeInTheDocument();
    expect(icon).toHaveClass('icon_right')
  })
});

但是很难判断结构中的哪一项是

clickable

项。因此，您可能需要更改这些以适应您的组件结构。

Answer 3

你可以尝试这个，我们必须从渲染函数中获取容器，我们可以通过类名从容器中获取元素作为数组，需要从数组中获取我们想要的元素，然后我们可以照常应用事件。

 const {container} = render(<Accordeon />);
 const someField= container.getElementsByClassName('some-class-name')[0];
    expect(someField).toBeInTheDocument();
    fireEvent.change(someField, {
        target: { value: '15' },
    });