next.js 测试库的userEvent.click不工作

aiazj4mn  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(141)

我用NextJS开发了一个项目。我想使用Jest和测试库测试导航栏中链接的路径名,但userEvent.click不起作用。因此,要么路径名不变,它一直返回/,要么userEvent.click不起作用。如何解决这个问题?

  • Navbar.tsx组件 *
import Link from 'next/link';
import React from 'react';

const Navbar = () => {
  return (
    <>
      <Link href="/" className="text-3xl font-deca font-extrabold italic" data-testid="logo">
        AvaDronity
      </Link>
      <nav>
        <ul>
          <li>
            <Link href="/drones">drones</Link>
          </li>
          <li>
            <Link href="/cameras">cameras</Link>
          </li>
          <li>
            <Link href="/robots">robots</Link>
          </li>
          <li>
            <Link href="/explore">explore</Link>
          </li>
          <li>
            <Link href="/support">support</Link>
          </li>
        </ul>
      </nav>
    </>
  );
};

export default Navbar;
  • Navbar.test.tsx文件 *
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import { createMemoryHistory } from 'history';
import Navbar from './Navbar';

describe('Navbar Component', () => {
  beforeEach(() => {
    render(<Navbar />);
  });

  it('should redirect to url and update history', async () => {
    const {
      location: { pathname },
    } = createMemoryHistory();
    console.log(pathname);

    const user = userEvent.setup();
    await user.click(screen.getByText('drones', { exact: false }));

    console.log(pathname);

    expect(pathname).toEqual('/drones');
  });
});

我已经审查并尝试了类似的错误和问题,从不同的网站,但我不能得到任何结果。
在我编写的测试中,在userEvent.click事件之后,路径名应该像预期的那样更新为/drones。

xbp102n0

xbp102n01#

我也遇到了同样的问题,但能够用fireEvent来解决下一个链接组件的问题。所以从理论上讲,下面的代码应该对你有用--

fireEvent.click(screen.getByText('drones', { exact: false }));

虽然知道userEvent是模拟用户交互的首选方法,但我无法找到任何其他方法来使其工作,并将fireEvent作为最后的手段。
希望这对你有帮助。

相关问题