标签: react-testing-library

forwardRef-wrapped 组件似乎没有设置 ref，因为以下测试失败并出现此错误：

    Error: Uncaught [TypeError: Cannot read properties of null (reading 'focus')]

它在浏览器中工作，只是测试失败。

组件：

export const SelectFormItem = forwardRef(
  <VT extends SelectValue = SelectValue>(
    { name, label, rules }: Props<VT>,
    ref: React.Ref<RefSelectProps>
  ) => {

    return (
      <Form.Item name={name} label={label} rules={rules}>
          <Select ref={ref} />
      </Form.Item>
    )
  }
)
SelectFormItem.displayName = 'SelectFormItem'

失败的测试：

describe('BEHAVIOR', () => {
  test('ref.current.focus() sets focus on component', () => {
    const Wrapper = () => {
      const ref = useRef<RefSelectProps>(null)
      return (
        <Form initialValues={{ …

我在我的项目中使用 React-18.0.0，在测试文件中我收到以下错误

createRoot(...)：目标容器不是 DOM 元素。

我的测试文件是：

import ReactDOM from 'react-dom/client';
import { render, screen } from "@testing-library/react";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

test("renders learn react link", () => {
    root.render(<App />);
    const linkElement = screen.getByText(/Hello React/i);
    expect(linkElement).toBeInTheDocument();
});

我正在编写测试用例来测试我的主页，但在编译代码时开玩笑，并在头盔标签处中断。

我搜索并发现我应该用react- helmet-async替换react-helmet并使用HelmetProvider。

现在我陷入了以下错误。

console.error
    The above error occurred in the <HelmetDispatcher> component:
    
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/Dispatcher.js:8:22)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/index.js:15:14)
        at div
        at App
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/Provider.js:37:5)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-router/cjs/react-router.js:113:30)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-router/cjs/react-router.js:202:35)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-query/lib/react/QueryClientProvider.js:45:21)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-redux/lib/components/Provider.js:21:20)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/src/__test__/helpers/test-utils.js:28:22)

我正在使用自定义 SSR，因此我已将渲染包装到 HelmetProvider 中的字符串元素。

我的渲染函数：

export const render = (
  ui,
  {
    initialState = initialReducerState,
    store = createStore(rootReducer, initialState),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => (
    <Provider store={store}>
      <QueryClientProvider …

我试图通过在输入字符串后检查其值来测试 TextInput，但它不起作用。任何帮助，将不胜感激。

这是代码：

import React from 'react'
import { TextInput } from 'react-native'
import { fireEvent, render } from "@testing-library/react-native"

test('<TextInput/>, () => {
  const { getByTestId } = render( <TextInput testID="input" /> );
  const input = getByTestId("input");
  fireEvent.changeText(input, "123");
  expect(input.value).toBe("123");
})

测试失败并显示以下消息：

Expected: "123"
Received: undefined

我有一个使用 RTK 查询挂钩生成的简单家庭列表，其中可以将项目标记为最喜欢的，并根据标签失效自动重新获取数据。虽然当我在测试中运行项目时一切正常，但 msw 无法匹配在突变成功通过标签失效触发后第二次调用的相同 GET 请求。

服务：

export const homesApi = createApi({
reducerPath: 'homesApi',
baseQuery: fetchBaseQuery({
  baseUrl: API_URL,
  prepareHeaders: (headers, { getState }) => {
    headers.set('Accept', `application/json`);
    return headers;
  },
}),
tagTypes: [
  'Homes',
],
endpoints: (builder) => ({
  getHomes: builder.query({
    query: (params) => {
      
      const url = qs.stringifyUrl(
        { url: '/homes', query: params },
        { skipEmptyString: true, skipNull: true }
      );

      return url

    },
    providesTags: (result) =>
      result?.data
        ? [
            ...result.data.map(({ id }) => ({ type: 'Homes', id …

我有一个组件，允许用户使用 React router v6 的钩子导航回历史记录useNavigate。但是，当我调用该函数时，测试似乎失败，navigate(-1)但如果我传递字符串 url，则测试会通过，例如。navigate("/home")。有谁知道正确的测试方法吗navigate(-1)？这是一个codesandbox来说明问题https://codesandbox.io/s/navigate-back-test-yt82g3?file=/src/navigateBack.test.tsx

import { renderWithRouter } from "./testUtils";
import { screen } from "@testing-library/react";

it("goes back", () => {
  function Home() {
    let navigate = useNavigate();

    function handleClick() {
      navigate("/about");
    }

    return (
      <div>
        <h1>Home</h1>
        <button onClick={handleClick}>about me</button>
      </div>
    );
  }

  function About() {
    let navigate = useNavigate();

    function handleClick() {
      navigate(-1); // test failed
      // navigate("/home"); // test passed
    }

    return (
      <div>
        <h1>About</h1>
        <button onClick={handleClick}>go …

当使用开箱即用的 Create React App 时，以下测试运行并通过得很好。

import { render, screen } from "@testing-library/react";\nimport userEvent from "@testing-library/user-event";\nimport App from "./App";\n\ndescribe("Update the name", () => {\n  it("updates the name", () => {\n    render(<App />);\n    userEvent.type(screen.getByLabelText(/name/i), "John");\n    userEvent.click(screen.getByRole("button"));\n\n    expect(screen.getByText("John")).toBeInTheDocument();\n  });\n});\n

所以，测试本身应该没问题。是的，只有 1\xef\xb8\x8f\xe2\x83\xa3 按钮，那就是type="submit"。应用程序在浏览器中运行时可以正常工作，并且在 Create React App (CRA) 中测试正常。

我正在尝试迁移到 Vitest（使用 Vite）。理论上，上述测试不需要改变。然而，这就是发生的事情：TypeError: target.ownerDocument.createRange is not a function。

让我们开始配置。

vite.config.js看起来像这样：

import { render, screen } from "@testing-library/react";\nimport userEvent from "@testing-library/user-event";\nimport App from "./App";\n\ndescribe("Update the name", …

例如，有两个如下所示的期望条件：

expect(firstItem).toHaveClass(firstStyle);
expect(firstItem).not.toHaveClass(secondStyle);

有没有办法让它们排成一行？就像是：

expect(firstItem).toHaveClass(firstStyle).and.not.toHaveClass(secondStyle);

当我像这样导入屏幕对象时

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

它允许我发出以下命令：screen.findByTestId(...)，但是我如何通过data-test（而不是data-testid）进行搜索？尝试通过自定义属性进行搜索，但两者都没有findByAttribute方法screen。

我正在使用 React 测试库，按照它的约定，元素应该通过getByRole.

当我输入type="text"角色时textarea，这个角色很好。

现在我已经输入了type="number"，错误消息建议我使用spinbutton有效的角色，但对我来说没有意义。

输入类型有不同的作用吗number？