在 React 测试库中更改状态值答案

【问题标题】：Change a state value in React Testing Library在 React 测试库中更改状态值
【发布时间】：2022-02-06 21:33:40
【问题描述】：

具有以下组件：

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时才会出现。

我想为此开玩笑写一个测试，但不知道如何在那里模拟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 是否存在于文档中？

【问题讨论】：

你不要模拟状态值。您与组件交互，使其状态发生变化，就像用户一样。 RTL 与例如 RTL 的主要优势之一Enzyme 是它不提供像访问组件状态这样的脚枪：testing-library.com/docs/guiding-principles。

标签： javascript reactjs ecmascript-6 jestjs react-testing-library

【解决方案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 测试库不建议按照documented 在这里测试实现细节。这就是为什么您可能不想在测试时访问组件的内部状态。

【讨论】：