标签: react-testing-library

我正在尝试测试 useQuery 挂钩。测试 (expect(screen.getByText(/Loading.../)).not.toBeInTheDocument()) 似乎失败。我只是不断在 dom 中加载文本，而不是标题。尽管mockResolved已被分配/知道为什么会发生这种情况吗？整个目标是测试 isLoading 和 isError。下面是代码

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

应用程序

import React, { useState, Fragment } from "react";
import { useQuery } from "react-query";
import { getManagers } from "./api/index";
import CustomInputSelect from "./components/CustomInputSelect";
import { processEmployeeData } from "./utils/index";
import "./App.scss";

const App …

我有一个非常简单的组件，我试图模拟 API 调用来获取一些稍有延迟的电影。

我想编写一个测试来测试电影是否被收集然后渲染到屏幕上。

我试图用来screen.getAllByTestId做到这一点，但它总是失败。就好像它没有重新渲染，因此没有获得更新的更改。

我在元素上添加了一个 testid，并且可以在 DOM 中看到它们。

任何人都可以帮忙解释为什么他们出现后找不到他们吗？

这是完整的组件代码...

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    // simulate API call to get
    setTimeout(() => {
      const movies = [{ title: 'Titanic' }, { title: 'Back To The Future' }];
      setMovies(movies);
    }, 1000);
  }, []);

  return (
    <div>
      {movies.length > 0 && (
        <div>
          {movies.map((x) => (
            <div data-testid='movies'>{x.title}</div>
          ))}
        </div>
      )}
    </div>
  ); …

我有一个 React 组件，里面有 Ant Design Modal，我正在尝试测试当单击按钮时模态是否打开：

组件：

const ModalComponent = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal
        title="Modal title"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </>
  );
};

测试文件：

test('modal opening', async () => {
  const { queryByText } = render(<ModalComponent />);

  fireEvent.click(queryByText('Open Modal'));

  await waitFor(() => expect(queryByText('Modal title')).toBeInTheDocument());
});

问题是当我尝试调试时，模态 DOM 永远不会在测试中呈现，因此测试失败。发生这种情况的原因可能是模态内容是在 body 标记内的组件 DOM 树外部创建的？

我想用 Jest 和 测试我的 Expo React Native 应用程序@testing-lib/react-native。

我在我的package.json.

"jest": {\n    "preset": "jest-expo",\n    "moduleDirectories": [\n      "node_modules",\n      "test-utils"\n    ]\n  },\n

我的文件夹结构如下所示：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80node_modules/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80test-utils/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80package.json\n

src/包含测试文件。我正在通过以下简单测试来测试我的配置src/index.test.js：

"jest": {\n    "preset": "jest-expo",\n    "moduleDirectories": [\n      "node_modules",\n      "test-utils"\n    ]\n  },\n

assert位于何处test-utils/index.js：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80node_modules/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80test-utils/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80src/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80package.json\n

如果我运行测试，我会收到错误：

Cannot find module \'test-utils\' from \'index.test.js\'\n

这是为什么？我的意思是我已经配置了moduleDirectories密钥？你该如何解决这个问题？我真的很希望能够assert作为绝对路径而不是相对路径导入。

我正在使用 Jest + Testing-Library/React 编写功能测试。经过几天的挠头，我发现当你使用.mockResolvedValue(...)或.mockResolvedValueOnce(...)嘲笑的范围不限于那个测试......

import React from "react";
import { render, waitForElement } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import myApi from '../myApi';
jest.mock('../myApi'); // this will load __mocks__/myApi.js (see below)
import { wait } from '@testing-library/dom';
import App from "../components/App";

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


describe("App", () => {

    test("first test", async () => {

        myApi.get.mockResolvedValueOnce('FOO');

        // App will call myApi.get() once
        const { container, getByText } = render(<App />);

        await waitForElement(
            () => getByText('FOO')
        ); …

无论如何，尝试测试函数在触发后是否被调用。当我从该函数中得到 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: "(___) ___-____"

这是我的测试用例的样子：

const renderCard = ({
  onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
  return render(
        <Card title={title} onSubmit={onSubmit}>
          <Button type="submit">Save</Button>
        </Card>,
  );
}; 

it("should invoke onSubmit when form is submitted", async () => {
      const onSubmit = jest.fn();
      window.HTMLFormElement.prototype.submit = () => {};
      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

我收到“错误：未实现：HTMLFormElement.prototype.submit”。我尝试了这里提到的解决方案https://github.com/jsdom/jsdom/issues/1937，但没有奏效。我不想消除错误而是正确执行测试。谢谢你。