更改 React 测试库中的状态值

Question

我有以下组件：

import { useState } from 'react';

export function MyComponent() {
  const [val, setVal] = useState(false);

  return (
    <div>
      big container
      <button onClick={() => setVal(!val)}>click</button>
      {val && <div>small container</div>}
    </div>
  );
}

export default MyComponent;

有一个 div 包含文字“小容器”，仅当

val

为

true

时才会出现。

我想为此在 Jest 中编写一个测试，但是我如何在那里模拟

val

的值？

这是迄今为止我的代码：

  it('small container visible only when val is true', () => {
    const { queryByText } = render(<MyComponent />);
    const toTest = queryByText('small container');
    expect(toTest).not.toBeInTheDocument();
  });

此测试通过，但是如何将添加的

val

设置为

true

以测试

toTest

是否存在于文档中？

Answer 1

您可以单击按钮将

val

设置为 true。

it('small container visible only when val is true', () => {
  const {queryByText, getByTestId} = render(<MyComponent />);
  const clickButton = getByTestId('your.button.test.id');
  fireEvent.click(clickButton);
  expect(queryByText('small container')).toBeInDocument();
});

React 测试库不建议按照此处的记录测试实现细节。这就是为什么您可能不想在测试时访问组件的内部状态。