用 Jest 和 Enzyme 反应组件的测试状态答案

【问题标题】：React testing state of component with Jest and Enzyme用 Jest 和 Enzyme 反应组件的测试状态
【发布时间】：2023-03-27 09:13:02
【问题描述】：

我有一个简单的组件，您在其中单击一个按钮，它使用 fetch 调用 API 并记录结果：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isLoading: false};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({isLoading: true});
    return fetch('https://api.github.com/users/londonappdev')
      .then(res => {
        return res.json();
      })
      .then(data => {
        console.log(data);
        this.setState({isLoading: false})
      });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

我正在尝试测试isLoading 在请求进行时设置为true，然后在请求完成后设置为false。

我的测试如下所示：

it('sets isloading to true while loading', () => {
  global.fetch = jest.fn().mockReturnValue(Promise.resolve({
    ok: true,
    json: () => Promise.resolve({'user': 'test'})
  }));

  const c = shallow(<App />);
  c.instance().handleClick().then(() => {
    expect(c.instance().state.isLoading).toEqual(false);
  });
  expect(c.instance().state.isLoading).toEqual(true);
});

这可行，但是我的问题是：以这种方式测试状态是否安全/可靠？由于setState 是异步的，是否有可能在正确设置状态之前调用expect(c.instance().state.isLoading).toEqual(true);？

任何有关测试此类组件的最佳方法的建议将不胜感激。

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

是的，这非常安全。与setTimeout(callback, 0) 类似，promise 回调排队等待在其余同步代码之后运行。这可确保您的断言将在程序中的正确位置运行。

单元测试的小技巧 - 我会打电话给c.find('button').prop('onClick')()，而不是调用c.instance().handleClick()。您的组件是您正在测试的“单元”，因此您应该尽量避免访问内部方法/属性

【讨论】：

非常感谢您的回复。即使这是一个容器并且按钮/表单将出现在子组件上，您是否仍然建议模拟按钮单击？
如果我试图测试这个 App 组件并且按钮位于子组件中，那么我将不再关心按钮 - 我会测试状态是否在我传递的函数道具时更新调用子组件。例如，如果您的子组件如下所示： function SubComponent ({ handler}) { return ; } 然后我会用 c.find('SubComponent').prop('handler')() 调用它