在 onClick 之后如何使用 Enzyme 检查 React Hooks 组件的更改？答案

【问题标题】：How do you use Enzyme to check for changes to a React Hooks component after onClick?在 onClick 之后如何使用 Enzyme 检查 React Hooks 组件的更改？
【发布时间】：2020-05-03 03:18:29
【问题描述】：

我正在尝试使用 Enzyme (v3.10)、Jest (v24.0) 和 TypeScript 在我的 100% React Hooks (React v16.12) 项目中编写一个简单的集成测试，如果我在我的应用容器，另一个显示计数器的组件将增加一个。计数器的当前值存储在 App 容器的状态中（见下面的 sn-ps）。

基本上，我mount App 组件来渲染它的子组件，然后尝试用 Enzyme 模拟点击按钮，并检查计数器显示组件的 props 看它的值是否上升。但什么也没有发生。不仅没有调用onClick 处理程序，而且我似乎无法检索我传递给PaperResource 组件的value 属性。所以基本上我无法在我的酶集成测试中单击按钮时测试计数器显示的变化！测试断言 value 属性从 0 变为 1，但此断言失败，此处的每个观察者代码都没有错误。这是因为酶对 Hooks 的支持还没有，还是我在这里做一些愚蠢的事情？当我在浏览器上运行应用程序时，一切正常。

这是我的集成测试

import React from 'react';
import App from './App';
import { mount, ReactWrapper } from 'enzyme';
import { act } from 'react-dom/test-utils';
import MakePaperButton from './components/MakePaperButton';
import PaperResource from './components/PaperResource';

describe('App', () => {
  let wrapper: ReactWrapper;

  beforeEach(() => {
    act(() => {
      wrapper = mount(<App />);
    });
  });

  describe('when make paper button is clicked', () => {
    beforeEach(() => {
      act(() => {
        wrapper.find('.make-paper__button').simulate('click');
      });
    });

    it('should increase paper resource', () => {
      expect(wrapper.find('.resources__paper').prop('value')).toEqual(1);
    });
  });
});

这是我的 React 代码

import React, { useState } from 'react';
import './App.scss';
import MakePaperButton from './components/MakePaperButton';
import PaperResource from './components/PaperResource';

const App: React.FC = () => {
  const [ resources, setResources ] = useState({
    paper: 0,
  });

  const handleMakePaperButtonClick = () => {
    setResources({
      ...resources,
      paper: resources.paper + 1,
    });
  };

  return (
    <div className="App">
      <MakePaperButton onClick={handleMakePaperButtonClick} />
      <div className="resources">
        <PaperResource value={resources.paper} />
      </div>
    </div>
  );
}

export default App;

我的组件很简单

// PaperResource.tsx
import React from 'react';

export default (props: { value: number }) => (
  <div className="resources__paper">
    <span>Paper: {props.value}</span>
  </div>
);

// MakePaperButton.tsx
import React from 'react';

export default (props: { onClick: () => void }) => (
  <div className="make-paper__button">
    <button onClick={props.onClick}>Make Paper</button>
  </div>
);

【问题讨论】：

看起来合法。您是否收到类似“模拟预期 1 个节点但 0 个已通过”之类的错误，还是因为值未递增而导致测试失败？
@skyboyer 刚刚将该信息添加到问题中，但它只是使断言失败，因为该值没有增加。没有抛出任何错误。

标签： reactjs typescript jestjs react-hooks enzyme

【解决方案1】：

到目前为止，我发现的唯一解决方案是将 expect 语句包装在 setTimeout() 中。

it('should increase paper resource', () => {
    setTimeout(() => {
        expect(wrapper.find('.resources__paper').prop('value')).toEqual(1);
    }, 0);
});

【讨论】：