标签: react-testing-library

无论如何，尝试测试函数在触发后是否被调用。当我从该函数中得到 a 时，它fireEvent正在工作。console.log但.toHaveBeenCalledTimes(1)返回 0。我错过了什么？

如果我handleLoginSubmit在父级中有该函数并将其作为支柱传递给子级，并且在测试中一切都会通过。但如果它在同一个组件中，则会失败。使用打字稿（如果有任何意义的话）。

这是经过测试的

import React, { FC } from 'react';\n\ntype Event = React.FormEvent<HTMLFormElement>;\n\ninterface Login {\n  handleLoginSubmit?: (event: Event) => React.ReactNode;\n}\n\nconst Login: FC<Login> = () => {\n  const handleLoginSubmit = (_event: Event) => {\n    console.log('Firing' ); // This is logged\n  };\n\n  return (\n    <form data-testid='form' onSubmit={(event) => handleLoginSubmit(event)}>\n      <input data-testid='email'/>\n      <input data-testid='password'/>\n      <button data-testid='login-button'>login</button>\n    </form>\n  );\n};\n\nexport default Login;\n

我的提交测试

  it('should handle ClickEvents', () => {\n\n …

这是我的 React 测试库测试中的一行：

expect(queryByTestId('tile-sample-service')).toHaveClass('regularTile-0-2-24', 'btn', 'btn-outline-secondary');

虽然它有效，但测试很脆弱，因为每次组件的结构发生变化时，我都需要返回并修复已更改的数字。

有没有一种方法可以toHaveClass与 RegEx 查询一起使用，或者是否有其他方法可以检查类是否存在但避免添加“0-2-24”之类的内容？

我正在学习使用react-testing-library，并且我有两个调用渲染的测试，但问题是第二个测试失败，无论我进行测试的顺序如何。

describe('...', () => {
  test('Renders form', () => {
    const { queryByTestId } = render(<ThemeProvider theme={themeRed}>{comp}</ThemeProvider>)
    expect(queryByTestId('address-form')).not.toEqual(null)
  })

  test('GenderSelector exists and works as expected', () => {
    const { queryByTestId } = render(<ThemeProvider theme={themeRed}>{comp}</ThemeProvider>)
    const genderSelector = queryByTestId('address-gender')
    const genderCheckboxes = genderSelector.querySelectorAll('input')
    expect(genderSelector).not.toEqual(null)
    expect(genderCheckboxes).toHaveLength(2)
    expect(genderCheckboxes[0].checked).toEqual(true)
    expect(genderCheckboxes[1].checked).toEqual(false)

    fireEvent.click(genderCheckboxes[1])
    expect(genderCheckboxes[0].checked).toEqual(false)
    expect(genderCheckboxes[1].checked).toEqual(true)
  })
})

主题提供者来自“styled-components”。如果我将渲染行移动到描述块中，以便仅调用一次，而不是在每个测试块中调用，则两个测试都会通过。

这是 RTL 设计的使用方式吗？只渲染一次？还是主题提供商造成的？我需要主题提供程序或测试错误，因为组件无法访问它们。

如果调用 render 两次，我得到的错误是

Found multiple elements by: [data-testid="address-gender"]

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or …

如何使用react-testing-library对屏蔽的输入字段进行单元测试。该组件是使用material ui 和react-hook-form 开发的。在这里您可以找到代码并处理我这边的示例。提前致谢

测试文件：

 let Phone_Input = getByTestId("phone-input");

  fireEvent.change(
      <InputMask mask="(999) 999-9999">{() => Phone_Input}</InputMask>,
      {
        target: { value: "9500902621" }
      }
    );

成分：

                      <InputMask mask="(999) 999-9999">
                          {() => (
                            <TextField
                              id="standard-required"
                              name="phone"
                              label="phone"
                              placeholder="Enter Phone"
                              inputProps={{
                                "data-testid": "phone-input"
                              }}

                            />
                          )}
                        </InputMask>

错误：

    The given element does not have a value setter

    expect(received).toBe(expected) // Object.is equality

    Expected: "(950) 090-2621"
    Received: "(___) ___-____"

在 React 测试库中，我想从屏幕获取整个渲染的 HTML，并检查它是否正确渲染并存在于 dom 中。

我看到屏幕有查询 DOM 的方法，但如何访问呈现的完整 HTML。

import React from 'react';
import {render, screen} from '@testing-library/react';
import '@testing-library/jest-dom';
import {server} from '../__mock__/server.mock';
import InfoBar from '../Components/infoBar';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('InfoBar renders correctly.', async () => {
    render(<InfoBar/>);
    expect(screen).toBeInTheDocument();
});

expect(screen).toBeInTheDocument();这不起作用。

我正在渲染一个元素，该元素利用 setTimeout 将内部文本从加载状态更改为所需的消息：

function Message({ message }: any) {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    const CTATimer = setTimeout(() => {
      setShowMessage(true);
    }, 1500);
    return () => {
      clearTimeout(CTATimer);
    };
  }, []);

  if (!showMessage) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <div>{message.text}</div>
    </>
  );
}

相应的测试渲染，然后将时间提前 1500 毫秒，然后应该显示消息。然而，目前测试失败，终端显示文本仍然是Loading...。测试是这样写的：

const mockMessage = {
  text: "this is a message",
  answers: [],
  id: 1,
};

afterEach(() => {
  jest.useRealTimers();
});

it("should show message after setTimeout", () => {
  jest.useFakeTimers(); …

我正在遵循最新版本的所有说明@testing-library/user-event。

前：

  test('request support action',() => {
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    userEvent.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

后：

  test('request support action', async () => {
    const user = userEvent.setup();
    
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    await user.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

requestSupport在更高的范围内被嘲笑const requestSupport = jest.fn();

我收到的错误是：

类型错误：range.cloneRange 不是函数

我的所有测试在库更新之前都通过了，现在全部失败了。

尝试对此组件进行简单测试时，出现 TypeError: actImplementation is not a function

import React from 'react';
import { StyledHeaderContainer, StyledTitle } from './styled';

export const Header = () => {
  return (
    <StyledHeaderContainer>
      <StyledTitle data-testid='title-test-id'>Subject Access Request</StyledTitle>
    </StyledHeaderContainer>
  );
};

这是我的测试

import * as React from 'react';
import 'jest-styled-components';

import { render, screen } from '@testing-library/react';
import { Header } from '../';
import "@testing-library/jest-dom";

describe('Header', () => {
  it('is rendered correctly', () => {
    expect(<Header />).toMatchSnapshot();
  });
});

describe('Title', () => {
    it('should have correct …

我正在尝试 tRCP，并认真遵循此处官方文档中描述的 Next.js 项目的设置： https: //trpc.io/docs/nextjs

然而我注意到有一个依赖 tRPC 的简单组件，比如这样

export const Sample = () => {
  const { data } = trpc.useQuery(['hello', { text: 'User' }]);
  if (data === undefined) {
    return <div>Loading...</div>;
  }
  return <div>{data.greeting}</div>;
};

由于以下琐碎测试而无法正确测试

describe('Sample', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<Sample />);
    expect(baseElement).toBeTruthy();
  });
});

因为没有提供程序的设置，例如withTRCP用于应用程序本身的 HOC 的设置。因此，测试失败了client（大概是trcpClient，与queryClient）未定义。

我想知道如何正确设置测试，在这种情况下提供正确的客户端，以及模拟查询，因为我在调用测试时没有运行相应的服务器端代码。

尝试使用 redux-toolkit rtk 查询运行第一个测试，并收到 api 未定义的错误。我做错了什么？

  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read property 'injectEndpoints' of undefined\n\n      33 | };\n      34 |\n    > 35 | export const authApi = api.injectEndpoints({\n         |                            ^\n      36 |     endpoints: (build) => ({\n      37 |         login: build.mutation<ILoginResponse, ILoginData>({\n      38 |             query: ({ username, password, captchaToken }) => {\n\n      at Object.<anonymous> (src/api/auth.ts:35:28)\n      at Object.<anonymous> (src/features/auth/authSlice.ts:2:1)\n      at Object.<anonymous> (src/api/index.ts:10:1)\n      at Object.<anonymous> (src/mocks/handler.ts:3:1)\n      at Object.<anonymous> (src/mocks/server.ts:3:1)\n      at Object.<anonymous> (src/setupTests.ts:6:1)\n      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)\n      at runJest (node_modules/@jest/core/build/runJest.js:404:19)\n …