标签: react-testing-library

我想测试一个没有标签的复选框。关键是还有其他复选框，所以我不能使用 getByRole。

我尝试过使用 data-testid，但显然它不起作用。

我应该如何检查该复选框是否已选中（toBeChecked（））？

<Checkbox
  data-testid={item?.id}
  key={item?.id}
  id={item?.id.toString()}
  color="secondary"
  checked={item?.checked}
  disabled={hasAll}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    if (item) {
      item.checked = e.target.checked;
      setFinalData(updateItemInArray(finalData, {
        item,
        index,
      }));
    }
  }}
/>

我用 React 测试库编写了以下测试。当我在浏览器中检查它时，它有效。然而，在这里它不起作用。有什么问题吗？

  it('Calls search callback on enter key press', () => {
    const mockSearchCallback = jest.fn();

    render(<Header onSearch={mockSearchCallback} />);

    userEvent.type(screen.getByRole('textbox'), 'testquery');

    userEvent.keyboard('{Enter}');

    expect(mockSearchCallback).toHaveBeenCalled();
  });

然而，它失败了。 Header其行为几乎就像一个包装器，所有逻辑都包含在搜索中。这是代码

export default function Search({ onSearch }: SearchProps) {
  const [query, setQuery] = useState('');

  const handleSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();

    if (query) {
      onSearch(query);
    }
  };

  return (
    <form className="c-search" onSubmit={handleSubmit}>
      <input
        className="c-search__input"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        name="query"
        autoComplete="off"
      ></input>
    </form>
  );
}

UPD 它适用于 userEvent 13，但不适用于 14。为什么？

我有一个自定义的 React 钩子，它本身使用了react-query useQuery()：

const useFetchSomething = () => {
  const { data, isLoading } = useQuery('key', ....);
  return .......
}

我必须创建一个自定义挂钩，然后使用useQuery()其中的挂钩，因为它有一些功能并从反应查询获取数据！

我尝试用以下方法测试这个钩子react-hooks-testing-library：

const { result } = renderHook(() => useFetchSomething());

但我收到此错误：

Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one]

为此，我该如何包装这部分：renderHook(() => useFetchSomething())与提供者？

我遇到一些问题，无法测试 MUI 下拉列表。我收到此错误：Unable to find an accessible element with the role "option" and name "/ninica/i"

我这里有一个示例代码：https://codesandbox.io/s/react-testing-library-material-ui-dropdown-5knbgu

我的测试：

test("select", () => {\n  render(<App />);\n\n  // Get and click in the dropdown\n  const dropdownButton = screen.getByRole("button", { name: /dog name \xe2\x80\x8b/i });\n  fireEvent.click(dropdownButton);\n\n  // Get and click in the dropdown item\n  const dropdownItem = screen.getByRole("option", { name: /ninica/i });\n  fireEvent.click(dropdownItem);\n});\n

我已经尝试使用getByTestId但有相同的结果，找不到。

我正在使用 create-react-app 5（带有 React 17、Jest 和测试库）以及 MUI 5。我想测试单击一个简单的“选择”菜单，并确保显示菜单选项。我尝试了以下方法：

  it('shows the menu', async () => {
    render(<FormControl fullWidth>
      <InputLabel id="testselect-label">Age</InputLabel>
      <Select
        labelId="testselect-label"
        id="testselect"
        data-testid="testselect"
        label="Age"
        value={10}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>);
    const selectButton = screen.getByTestId("testselect");
    userEvent.click(selectButton);
    expect(await screen.findByRole('presentation')).toBeInTheDocument();
  });

但菜单（有role="presentation"）没有出现，因此测试失败。如果我screen.debug()在测试后调用，它会打印“选择”按钮，但不会打印菜单。

我已经看过这个问题/答案，我发现 MUI5 的 Select 响应 mouseDown 事件而不是 click 事件。但userEvent.click两者都发送，所以这不是问题。我也尝试过fireEvent.mouseDown但没有运气。

我还尝试了调试器，据我所知，onMouseDown相关 MUI 组件 ( SelectInput) 的处理程序从未被调用。

有人有一个有效的例子吗？

我目前正在使用 react-testing-library 并且似乎无法弄清楚如何测试组件的 setState 。

在以下示例中，我尝试根据 API 中的数据测试加载的项目数是否正确。稍后将扩展它以测试诸如项目之间的交互之类的事情。

成分：

...

componentDidMount() {
    this.getModules();
}

getModules () {
    fetch('http://localhost:4000/api/query')
    .then(res => res.json())
    .then(res => this.setState({data : res.data}))
    .catch(err => console.error(err))
}

...

render() {
  return(
      <div data-testid="list">
          this.state.data.map((item) => {
              return <Item key={item.id} data={item}/>
          })
      </div>
  )
}

测试：

...

function renderWithRouter(
    ui,
    {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},) {
    return {
        ...render(<Router history={history}>{ui}</Router>),
        history,
    }
}

...

test('<ListModule> check list items', () => {
     const data = …

我从头开始引导我的第一个TypeScript + React项目。我成功完成了TypeScript和组件渲染。但是，当我尝试添加测试时，它只是由于某些类型错误而失败。

我尝试使用不同的配置，甚至添加setupTests.ts文件。

这是我的配置：package.json

{
  ....
      "dependencies": {
        "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/polyfill": "^7.4.0",
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.3.3",
        "@types/html-webpack-plugin": "^3.2.0",
        "@types/jest": "^24.0.11",
        "@types/react": "^16.8.10",
        "@types/react-dom": "^16.8.3",
        "@types/react-redux": "^7.0.6",
        "@types/react-router-dom": "^4.3.1",
        "@types/redux": "^3.6.0",
        "@types/redux-logger": "^3.0.7",
        "@types/redux-promise": "^0.5.28",
        "@types/webpack": "^4.4.26",
        "@typescript-eslint/eslint-plugin": "^1.5.0",
        "@typescript-eslint/parser": "^1.5.0",
        "babel-jest": "^24.5.0",
        "babel-loader": "^8.0.5",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^4.1.0",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-react-hooks": "^1.6.0",
        "html-webpack-plugin": "^3.2.0",
        "jest": "^24.5.0",
        "jest-dom": "^3.1.3",
        "prettier": "^1.16.4",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-redux": "^6.0.1",
        "react-router": …

我在测试中仅获取加载状态和未定义的数据。我不知道为什么我要遵循给定示例中的所有内容。请帮忙。

测试文件。当我等待这条线执行时await wait(() => getByTestId('edit-category'));。它将查询的响应数据提供为未定义。错误：TypeError: Cannot read property 'getCategory' of undefined 第 34 行editConatinerCategory.tsx=>category={data!.getCategory!}

import React from 'react';
import gql from 'graphql-tag';
import { cleanup, wait } from 'react-testing-library';
import { customRender } from '../../../test-utils/customRender';
import { EditCategoryContainer } from './Container';

afterEach(() => {
  cleanup();
  console.error;
});
console.error = jest.fn();

const getCategoryMock = {
  request: {
    query: gql`
      query getCategory($id: Int!) {
        getCategory(id: $id) {
          id
          name
          active
          position
        }
      }
    `,
    variables: { …

我正在尝试测试是否将正确的道具传递给组件。在酶中，它很容易通过：

const control = enzyme.mount(<Test />);
expect(control.find(<CompToTest />).props().MyProp).toEqual(expectedProp);

如何使用 react-testing-library 获得相同的结果？谢谢。

我建立一个聊天应用程序，并会使用喜欢写集成测试react-testing-library并不能弄清楚如何嘲笑socket.io-client的socket.on，socket.emit等等。

我尝试按照这篇文章并尝试使用mock-socket.io和socket.io-mock都没有运气。

这是我要测试的组件：

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
import 'dotenv/config';
import ChatInput from './ChatInput';
import Messages from './Messages';

function App() {
  const [messages, setMessages] = useState([]);

  const port = process.env.REACT_APP_SERVER_PORT;
  const socket = io(`http://localhost:${port}`);

  useEffect(() => {
    socket
      .emit('app:load', messageData => {
        setMessages(messages => [...messages, ...messageData]);
      })
      .on('message:new', newMessage => {
        setMessages(messages => [...messages, newMessage]);
      });
  }, []);

  const …