Question

我有一个组件，我需要像这样将状态传递给它，因此该组件可以更改其父级中的状态。我只是在使用 React 测试库而不使用 Enzyme 而使用 Jest。

const [open, setOpen] = useState<boolean>(false);
<Toggle value={open} setValue={setOpen} onText='Open' offtext='Closed' />

和组件本身

import React, { Dispatch, SetStateAction } from 'react';

interface PropsShape {
  value: boolean;
  setValue: Dispatch<SetStateAction<boolean>>;
  onText: string;
  offtext: string;
}


function Toggle({ value, setValue, onText, offtext }: PropsShape) {
  return (
    <div className='Toggle'>
      <div
        className='Toggle--slider'
        onClick={() => setValue(!value)}
        data-testid='click'
      >
        <div className={value ? 'on' : 'off'}></div>
      </div>
      <div className='Toggle--label'>{value ? onText : offtext}</div>
    </div>
  );
}

export { Toggle };

这是我正在尝试做的那种测试

import { useState } from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import { Toggle } from '../components/toggle';

  test('The user can see the closed text after the toggle has been clicked', async () => {
    const [open, setOpen] = useState<boolean>(false); // CANT DO THIS
    render(
      <Toggle value={open} setValue={setOpen} onText='Open' offtext='Closed' />
    );
    fireEvent.click(screen.getByTestId('click'));
    expect(await screen.queryByText('Closed')).toBeVisible();
  });

如何在测试中设置 value 和 setValue，以便在单击切换开关时可以更改它们？我尝试添加 const [open, setOpen] = useState<boolean>(false); 但不允许使用钩子？

Answer 1

React Hook 是可以在 React 组件中重用的代码片段。不允许在测试中使用钩子，因为该测试不是 React 组件。您可以做的是为执行此操作的测试创建一个包装器组件：

 test('The user can see the closed text after the toggle has been clicked', async () => {
    const Wrapper = () => {
      const [open, setOpen] = useState<boolean>(false); // YOU CAN DO THIS INSIDE THE WRAPPER COMPONENT
      return <Toggle value={open} setValue={setOpen} onText='Open' offtext='Closed' />
    };
    render(<Wrapper />);
    fireEvent.click(screen.getByTestId('click'));
    expect(await screen.queryByText('Closed')).toBeVisible();
  });

如果测试父组件，此测试可能会增加更多价值，因为实际上，您在这里测试的是组件执行回调（在您的情况下为 setValue）并显示特定值，但是更改该值的逻辑本身并未经过测试。

React 测试库：如何测试需要来自其父级的 useState 钩子的组件？

1 个答案: