标签: react-testing-library

I have looked into similar questions (like this one), but the proposed solutions didn't work for me when using react-testing-library.

I have a component that can receive multiple children. This component will then calculate its own size and its children size, to check how many children it will be able to render. It works fine when I use it in my application.

My problem is that, when rendering this component with react-testing-library, the container of the component …

我正在尝试使用测试库在 fireEvent.click 之后检查 DOM 元素。我知道我需要在 fireEvent 之后等待，但不知道为什么简单地使用 await 不起作用？下面是用两种方式编写的相同测试——第一个失败，第二个通过。我不明白为什么第一个失败......非常感谢任何见解！

ps——我知道wait已被弃用，waitFor是首选，但是由于一些限制，我目前无法更新版本:(

失败的测试

// This test fails with the following error and warning:
// Error: Unable to find an element by: [data-test="name_wrapper"]
// Warning: An update to OnlinePaymentModule inside a test was not wrapped in act(...).

  it('this is a failing test...why', async () => {
      const { getByText, getByTestId } = render(<Modal {...props} />);
      const button = getByText('open modal');

      fireEvent.click(button);

        const nameWrapper =  await getByTestId('name_wrapper');
        expect(
          nameWrapper.getElementsByTagName('output')[0].textContent
        ).toBe('Jon Doe');

        const numberWrapper = …

当我测试<Link />行为，期望它重定向到某个路由时，出现了 TypeError ( Cannot read property 'push' of null)。

这是我当前正在测试的组件：

import React from "react"
import Link from "next/link"

const Sandbox = () => {
  return (
    <div>
      <Link href="/about">
        <a data-testid="mytest">Click Me</a>
      </Link>
    </div>
  )
}

export default Sandbox

这是我正在运行的测试：

import React from "react"
import { render, fireEvent } from "@testing-library/react"
import { useRouter } from "next/router"
import Sandbox from ".."

jest.mock("next/router", () => ({
  useRouter: jest.fn(),
}))

describe("Sandbox", () => {
  it.only("should navigate accordingly", () …

我\xe2\x80\x99m 不清楚如何在使用以下设置时模拟我的 api 响应。

我有以下测试：

import React from \'react\';\nimport { cleanup, render, wait } from \'@testing-library/react\';\nimport axios from \'axios\';\nimport Condition from \'./index.jsx\';\n\njest.mock(\'axios\', () => {\n  return {\n    create: jest.fn(() => ({\n      get: jest.fn().mockResolvedValue({ data: {} }),\n      interceptors: {\n        request: { use: jest.fn(), eject: jest.fn() },\n        response: { use: jest.fn(), eject: jest.fn() },\n      },\n    })),\n  };\n});\n\n\nafterEach(cleanup);\n\ntest(\'fetches and displays data\', async () => {\n  axios.get.mockResolvedValue({ data: \'mock data\' });\n  const { container } = render(<Condition {...props} />);\n  await wait(() => …

有没有办法使用 RTL 来测试元素是否具有基于正则表达式的有效属性？

就我而言，我想检查每个<a> 标签href是否都带有前斜杠和尾随斜杠， /如下所示：<a href="/link-1/">Link 1/</a>

成分 ：

const DropdownMenu = ({ open }) => {
  return (
    <ul className="dropdown-menu">
      {open && (
        <>
          <li>
            <Link to="/link-1/">Link 1</Link>
          </li>
          <li>
            <Link to="/link-2/">Link 2</Link>
          </li>
          <li>
            <Link to="/link-3/">Link 3</Link>
          </li>
        </>
      )}
    </ul>
  )
}

正则表达式：^\/.*\/$

测试 ：

 test('links have forward and trailing slashs', () => {
    render(<DropdownMenu open={true}></DropdownMenu>)
    const listLinks = screen.getAllByRole('link')
    listLinks.forEach((el) => {
      expect(el).toHaveAttribute('href', …

我有这样的 HTML 代码：

<label class="switch" value="true">
    <input name="source" type="checkbox"/>
</label>

如何访问带有名称的输入source？我尝试过使用getByRoleandname属性，但它会抛出一个错误，表明该输入有name="".

以下是尝试过的解决方案，不起作用：

screen.getByRole('checkbox', { name: 'source' });

如何以其他方式访问此输入元素？

我尝试按照提供的解决方案这样做

const elem = document.querySelector(
    `input[name="source"]`);
if (elem) {
    userEvent.click(elem);
}

这可行，但如果我像这样删除 if 语句

const elem = document.querySelector(
    `input[name="source"]`);
userEvent.click(elem);

我收到错误：

null 类型的参数| 元素不可分配给“targetelement”类型的参数。null 类型不可分配给 targetelement 类型

我可以使用 React 测试库的方法成功实现测试fireEvent，但是当我尝试使用等效测试时，userEvent我无法让它触发任何内容。我怎样才能解决这个问题？

代码沙箱

/MyInput.tsx

import { useState } from "react";

export default function MyInput() {
  const [inputTextState, setInputTextState] = useState("");
  return (
    <div>
      <label>
        My Input
        <input
          value={inputTextState}
          onChange={(event) => setInputTextState(event.target.value)}
        />
      </label>
      <p>{inputTextState}</p>
    </div>
  );
}

__tests__/MyInput.test.tsx

import { fireEvent, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import MyInput from "../MyInput";

const setup = () => {
  const utils = render(<MyInput />);
  const input = utils.getByLabelText("My Input") as HTMLInputElement;
  return {
    input,
    ...utils …

我按照本教程从 React Router v5 迁移到 v6 。我想用react-testing-library来测试它，但是我的旧单元测试（使用本文档中的模式）停止工作。

我的 React Router v6 应用程序是这样的

const router = createBrowserRouter([
    {
        path: "/",
        element: (
            <>
                <SiteHeader />
                <Outlet />
            </>
        ),
        errorElement: <NotFound />,
        children: [
            { path: "/", element: <Home /> },
            { path: "/posts", element: <Posts /> },
            { path: "/post/:postId", element: <PostPage /> },
        ],
    },
]);

function App() {
    return (
        <div className="app">
            <RouterProvider router={router} />
        </div>
    );
}

正如你所看到的，它使用RouterProvider而不是Switch/ Route …

我正在尝试测试一个 React 服务器组件，它返回一个 Promise。Jest 中的标准render方法不喜欢这样。

我检查了类似的问题，但所有问题都 > 4 岁，并且正在处理componentDidMount等。

/// Home.tsx
async function Home(props: Props) : Promise<JSX.Element> {
 // call async functions to setup component
}

/// home.test.ts
describe('Home', () => {
  it('renders a heading', () => {
     render(<Home />);
  }
}

错误：

'Home' can not be used as a JSX element

关于如何解决这个问题有什么建议吗？一个明显的解决方案是让组件不返回 Promise，但我正在编写代码来满足不理想的测试框架。

当我使用react-testing-library时，它说错误：不变的预期应用程序路由器要安装，在开发环境中运行时没有这样的问题。

测试逻辑在这里

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import NavBar from "@/components/NavBar";

describe("<NavBar>", () => {
    it ("the login pop out displayed after click the login/sign up button", async () => {
        render(<NavBar />);

        const loginButton = screen.getByRole("link", {
            name: "LOGIN/SIGN UP"
        });
        const loginCard = screen.getByTestId("loginCard");

        await userEvent.click(loginButton);
        expect(loginButton).toBeCalled();
        expect(loginCard).toBeVisible();
    })
});

组件在这里：导航栏：

"use client"

import React, { Dispatch, SetStateAction } from "react";
import { useRouter } from "next/navigation";

interface NavBarProps {
  setVisibleLogin?: Dispatch<SetStateAction<boolean>>; …