1

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

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);但不允许使用挂钩？

4

1 回答 1

3

React Hooks 是可以在 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）并且显示特定值，但更改该值的内部逻辑不是本身正在测试。

于 2021-02-17T10:27:16.663 回答