标签: react-testing-library

我想将 React 测试库添加到使用 mocha 和 chai 进行单元测试的项目中。在编写断言时我有点困惑，大多数例子都使用 jest 和 jest-dom。我真的很热衷于使用像toBeInTheDocumentor 这样的断言toHaveTextContent

我想知道是否有一个 chai 插件可以替代 jest-dom？或者您找到了哪些使用 React 测试库与 mocha 和 chai 的替代解决方案？

我有一个组件，想用反应玩笑对其进行单元测试...我想测试 onClick 事件..我已经尝试了很多情况，但它们没有涵盖 onClick 语句

这是我的组件

export default class HeaderCreate extends Component {

  render() {
    const { name, description, closeRightSection } = this.props;
    return (
      <div className="header">
        <h1 className="header-text" title={name} data-testid="header">{name}</h1>
        <p data-testid= "description-para">{description}</p>

        <Tooltip title="Close Section">
          <div className="icon-close">
            <i className="material-icons" onClick={() => closeRightSection()} data-testid="id">close</i>
          </div>
        </Tooltip>
      </div>
    )
  }
}; 

这是我的 test.js

import React from 'react'
import { render } from "@testing-library/react";

import HeaderCreate from '../components/createHeader';

test("render header correctly", () => {
    const { getByTestId } = render(<HeaderCreate name="My …

这是我的第一个问题，我编码才一年，所以请耐心等待。我在网站上寻找类似的问题，但找不到任何对我有用的东西。

我创建了一个 Icon 组件，在其中动态导入请求的 SVG。我第一次使用这个运行良好的解决方案，但是当我尝试使用反应测试库和快照测试这个组件时，我意识到快照始终是在未导入任何内容时返回的跨度。我首先认为它与 useRef() 的使用有关，因为我看到人们说 refs 不适用于 Jest，所以我将 Icon 组件更改为：

const Icon: FC<IconProps> = ({ type, onClick, tooltip, className }: IconProps) => {

  const [IconProps, setIconProps] = useState({
    className: className || 'icon'
  });
  const tooltipDelay: [number, number] = [800, 0];
  useEffect(() => {
    setIconProps({ ...IconProps, className: className || 'icon' });
  }, [className]);

  const SVG = require(`../../svg/${type}.svg`).default;
  const spanClassName = "svg-icon-wrapper";
  if (typeof SVG !== 'undefined') {
    if (tooltip) {
      return (
        (<Tooltip title={tooltip.title} delay={tooltip.delay ? tooltipDelay …

我正在用来testing-library测试单选按钮组的实现。我可以测试将tab焦点设置到第一个单选选项，但我无法正确测试箭头键导航。

这是我的测试：

import {
  getByLabelText,
  render,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
...

test('arrow key navigation', () => {
  const {container} = render(
    <div>
      <label htmlFor="apple">
        Apple
        <input type="radio" value="apple" id="apple" name="fruit"/>
      </label>
      <label htmlFor="banana">
        Banana
        <input type="radio" value="banana" id="banana" name="fruit"/>
      </label>
    </div>
  )

  const apple = getByLabelText(container, 'Apple')
  const banana = getByLabelText(container, 'Banana')

  userEvent.tab()
  expect(apple).toHaveFocus() // This assertion passes
  userEvent.keyboard('{arrowright}')
  expect(banana).toHaveFocus() // This assertion fails
})

如何过滤getByLabelText查询，如果它抛出类型错误：TestingLibraryElementError: Found multiple elements with the text of: /to/i，我有以下 HTML 结构，其中有一些嵌套标签：

当前的 HTML 结构

<div class="ant-row ant-form-item ant-radio-group-cards" style="row-gap: 0px;">
    <div class="ant-col ant-form-item-label">
        <!-- <label> with "To" text -->
        <label for="transferFunds_to" class="ant-form-item-required" title="To">To</label> 
    </div>
    <div class="ant-col ant-form-item-control">
        <div class="ant-form-item-control-input">
            <div class="ant-form-item-control-input-content">
                <!-- Other <label> with "To" text here -->
                <label class="ant-radio-button-wrapper">
                    <span class="ant-radio-button"><input id="transferFunds_to" type="radio" class="ant-radio-button-input" value="" /><span class="ant-radio-button-inner"></span></span>
                    <span>
                        <li class="ant-list-item">
                            <div class="ant-list-item-meta">
                                <div class="ant-list-item-meta-avatar">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" style="font-size: 48px;"></svg> …

我正在使用MSW和OpenAPI 后端包。我想模拟展位浏览器服务器和测试服务器。我有 OpenAPI 定义可用的形式，我为 RTK 查询生成 generated.ts （超出了这个问题的范围）。我想使用 OpenAPI 规范将其与 OpenAPI 后端一起使用，并为浏览器和测试生成 MSW 休息工作人员。

接下来是设置：

索引.tsx

import worker from './mocks/browser';

if (process.env.NODE_ENV === 'development') {
    worker.start();
}

模拟/浏览器.ts

import { setupWorker, rest } from 'msw';

import { OpenAPIBackend } from 'openapi-backend';
import type { Document } from 'openapi-backend';
import definition from './api.json';


// create our mock backend with openapi-backend
const api = new OpenAPIBackend({ definition: definition as Document });
api.register('notFound', (c, res, ctx) => res(ctx.status(404)));
api.registerHandler('notImplemented', …

我有一个自定义挂钩，如下所示

export const useUserSearch = () => {
  const [options, setOptions] = useState([]);
  const [searchString, setSearchString] = useState("");
  const [userSearch] = useUserSearchMutation();
  useEffect(() => {
    if (searchString.trim().length > 3) {
      const searchParams = {
        orgId: "1",
        userId: "1",
        searchQuery: searchString.trim(),
      };
      userSearch(searchParams)
        .then((data) => {
          setOptions(data);
        })
        .catch((err) => {
          setOptions([]);
          console.log("error", err);
        });
    }
  }, [searchString, userSearch]);
  return {
    options,
    setSearchString,
  };
};

我想测试这个钩子，但无法模拟userSearch在 useEffect 内部调用的函数。有人可以帮忙吗？这是我的测试

it('should set state and test function', async () => {
    const …

我正在使用 Redux 来管理组件的状态。虽然它适用于我的应用程序，但我无法让它在我的反应测试库测试套件中工作。

好消息是，这里Redux-RTK有设置他们的库的文档（示例如下）。坏消息是，我很难将其转换为，也很难做任何其他需要做的事情来使其在测试中实际工作。react-testing-library jsxtsx

// testing-utils.ts

import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import alertReducer from '../alertSlice'

function render(
 ui,
  {
    preloadedState,
    store = configureStore({
      reducer: { alert: alertReducer },
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children …