标签: react-testing-library

我正在使用 TypeScript 编写一个 React 应用程序。我使用material-ui作为我的组件，使用react-testing-library作为我的单元测试。

我正在为 Material-ui 的 Grid 组件编写一个包装器，以便我始终拥有一个容器。

import Grid from "@material-ui/core/Grid";\nimport withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";\nimport React, { PureComponent } from "react";\nimport styles from "./styles";\n\nexport interface OwnProps {\n  className?: string;\n}\n\nexport interface Props extends WithStyles<typeof styles>, OwnProps {}\n\nexport interface DefaultProps {\n  className: string;\n}\n\nexport class GridContainer extends PureComponent<Props & DefaultProps> {\n  static defaultProps: DefaultProps = {\n    className: ""\n  };\n\n  render() {\n    const { classes, children, className, ...rest } = this.props;\n    return (\n      <Grid\n        data-testid="grid-container"\n        container={true}\n        {...rest}\n …

我正在使用react-testing-library并且我有一个自定义渲染：

const customRender = (node, ...options) => {
  return render(
    <ThemeProvider theme={Theme}>
      <MemoryRouter>{node}</MemoryRouter>
    </ThemeProvider>,
    ...options
  );
};

我可以在我的测试中成功使用它render，但不能用于 a rerender：

test("shows content once data has loaded", () => {
  const { queryByTestId, rerender, debug } = render(
    <ConnectAccount
      currentUser={{
        loading: true
      }}
    />
  );

  expect(queryByTestId("content")).toBeNull();

  rerender(
    <ConnectAccount
      currentUser={{
        user: {
          name: "Test User"
        }
      }}
    />
  );

  debug();
});

我收到一个TypeError: Cannot read property 'black' of undefined错误rerender。有没有办法让重新渲染使用自定义渲染，这样我就不必将每个重新渲染都包装在 中ThemeProvider？

我正在使用这个组件：

<AceEditor
  value={data}
  className="code-editor"
  mode="json"
  theme="dracula"
  onChange={setData}
  name="data"
  height="320px"
  width="100%"
  editorProps={{ $blockScrolling: true }}
  showPrintMargin={false}
  highlightActiveLine={false}
/>

那么，使用react-testing-library如何获取这个组件并触发onChange事件？我试图找到一些像getByComponentName或类似的函数，但没有成功。

我似乎无法解决为什么收到此错误：这是我的配置：

lang-js
react - 15.3.1
react-dom - 15.3.1
react-testing-library - 6.0.0
jest - 23.6.0

lang-js
import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';

afterEach(cleanup);

test('loads and displays ', async() => {

})

我在页面上评论了一个未解决的GH 问题react-testing-library。提前致谢

我正在使用react-testing-library 测试来自“react-router-dom”的链接。

通常单击此链接，应该会出现linkId在页面上。

但是 fireEvent.click 在我的测试中，没有触发该操作。因此我没有我的内容。

      <ul>
        <li>
          <Link  data-testid="item" to={generatePath(LINK_TEST, { linkId: 'Link_test1' })}>Link Test 1</Link>
        </li>
... test : 

    const linkButton = getByText(/Link Test 1/)

    fireEvent.click(linkButton)

    const content = queryAllByText(/Page : Link_test1/)
    await waitForElement(() => content)
    expect(content).toHaveLength(1)

我有一个名为 FileReader 的 React 组件，基于 Dropzone React 组件（https://github.com/react-dropzone/react-dropzone）。该文件读取器在将文件拖放到 FileReader 的输入元素上时调用回调反应钩子，如下所示：

import React, { useCallback } from \'react\';\nimport PropTypes from \'prop-types\';\nimport { useDropzone } from \'react-dropzone\';\n\nfunction FilePicker(props) {\n  const { fileName, setFile, setFileName } = props;\n\n  const onDrop = useCallback((acceptedFiles) => {\n    const reader = new FileReader();\n\n    reader.onload = () => {\n      const binaryFile = reader.result;\n      setFile(binaryFile);\n    };\n\n    acceptedFiles.forEach((file) => {\n      setFileName(file.name);\n      return reader.readAsBinaryString(file);\n    });\n  }, [setFile, setFileName]);\n  const { getRootProps, getInputProps } = useDropzone({ onDrop });\n\n  return …

我对查询元素何时/如何更新感到困惑。例如：

我有一个可以计数的按钮。当数到3时，它就消失了。

import React, { useState } from "react";

export default () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count < 3 && (
        <button onClick={() => setCount(count + 1)}>{count}</button>
      )}
    </div>
  );
};

我正在像这样测试它：

test("Counter counts up and disappears", () => {
  const { queryByText } = render(<App" />);

  const button = queryByText("0");
  expect(button.textContent).toEqual("0");

  fireEvent.click(button);
  expect(button.textContent).toEqual("1");

  fireEvent.click(button);
  expect(button.textContent).toEqual("2");

  fireEvent.click(button);
  expect(button).toBe(null);
});

测试失败并出现以下错误：

expect(received).toBe(expected)

Expected value to be (using ===):
  null
Received:
  <button>2</button>

为什么按钮元素知道其文本内容已更改？我们不需要在每次点击后运行queryByText("1")and 。 …

当用户在输入搜索中输入一些文本时，必须删除 data-testid = 'loading'，现在控制台返回 Unable to find an element by: [data-testid="loading"] 有人可以建议我用 swr 或建议编写测试对我来说如何模拟来自 swr 的响应

这是我的组件文件

import axios from "axios";
import { useEffect, useState } from "react";
import useSWR from "swr";
import "./styles.css";

const useDebounce = (newValue) => {
  const [value, setValue] = useState("");
  useEffect(() => {
    const timeout = setTimeout(() => {
      setValue(newValue);
    }, 500);
    return () => clearTimeout(timeout);
  }, [newValue]);
  return value;
};

export const fetcher = async (url) => {
  const { data } = await …

我正在为表单 React 组件编写测试（使用 Jest 和 React 测试库）。我有一个在表单提交上运行的方法：

const onSubmit = (data) => {
  // ...
  setIsPopupActive(true);
  // ...
};

并且useEffect在isPopupActive更改后运行，所以也在提交时：

useEffect(() => {
  if (isPopupActive) {
    setTimeout(() => {
      setIsPopupActive(false);
    }, 3000);
  }
}, [isPopupActive]);

在测试中，我想检查一下，弹出窗口是否在 3 秒后消失。所以这是我的测试：

it('Closes popup after 3 seconds', async () => {
    const nameInput = screen.getByPlaceholderText('Imi?');
    const emailInput = screen.getByPlaceholderText('Email');
    const messageInput = screen.getByPlaceholderText('Wiadomo??');
    const submitButton = screen.getByText('Wy?lij');

    jest.useFakeTimers();

    fireEvent.change(nameInput, { target: { value: 'Test name' } });
    fireEvent.change(emailInput, { target: …

测试表单时，我使用 userEvent 在文本框中键入“hello”，然后在使用 toHaveValue() 直接测试所述文本框的值时，它向后返回字符串...

 render(<Form />)
 userEvent.clear(screen.getAllByRole('textbox')[0])
 userEvent.type(screen.getAllByRole('textbox')[0], 'hello')
 expect(screen.getAllByRole('textbox')[0]).toHaveValue('hello')

运行纱线测试后控制台中的错误：

包版本：

    "react-scripts": "^3.4.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.1.9",