React Testing Library如何设置组件useState状态的初始测试值

方案1：修改组件支持传入初始值（推荐，可测试性更强） #

原组件的计数器初始值硬编码为0，我们可以新增可选的initialCount属性，默认值设为0不影响原有业务逻辑，改造后的组件代码如下：

import { useState } from 'react';

const Counter = ({ initialCount = 0 }) => {
  const [counter, setCounter] = useState(initialCount);

  return (
    <div>
      <button
        onClick={() => {
          setCounter((value) => value + 1 );
        }}
        type='button'
        value={`${counter}`}
      >
       {counter}
      </button>
      <button
        disabled={counter > 2 ? false : true}
        type='button'
        value={`${counter}`}
        data-testid='counterBtn'
      >
        Exit
      </button>
    </div>
  );
};

export default Counter;

对应的测试用例（基于React Testing Library）直接传入大于2的初始值即可：

import { render } from '@testing-library/react';
import Counter from './Counter';

it('Enable button if counter is greater than 2', () => {
  const { getByTestId } = render(<Counter initialCount={3} />);
  expect(getByTestId('counterBtn')).toBeEnabled();
});

注意：你原有测试用例的it语法存在括号位置错误，回调函数需要放在it方法的入参括号内，上面已修正。

方案2：不修改原组件，测试中模拟用户操作更新计数器 #

如果不想改动原有组件代码，可以在测试中模拟点击计数按钮3次，让计数器值从0变为3后再做校验：

import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

it('Enable button if counter is greater than 2', () => {
  const { getByRole, getByTestId } = render(<Counter />);
  const countBtn = getByRole('button', { name: '0' });
  // 连续点击3次触发计数器累加
  fireEvent.click(countBtn);
  fireEvent.click(countBtn);
  fireEvent.click(countBtn);
  expect(getByTestId('counterBtn')).toBeEnabled();
});

内容的提问来源于stack exchange，提问作者Ashwin Allen