在 onClick 之后，如何使用 Enzyme 来检查 React Hooks 组件的更改?

Question

我正在尝试在我的 100% React Hooks (React v16.12( 项目中编写一个简单的集成测试，其中包含酶 (v3.10(、Jest (v24.0( 和 TypeScript，如果我单击应用程序容器中的一个按钮组件，另一个显示计数器的组件将上升一个。计数器的当前值存储在 App 容器的状态中(请参阅下面的代码片段(。

基本上，我mountApp 组件来渲染其子组件，然后尝试模拟使用 Enzyme 单击按钮并检查计数器显示组件的道具以查看其值是否上升。但什么也没发生。不仅没有调用onClick处理程序，而且我似乎无法检索我传递给PaperResource组件的value道具。所以基本上当我在酶集成测试中单击按钮时，我无法测试计数器显示的变化！测试断言valueprop 从 0 变为 1，但此断言失败，此处的每个 seenter 代码都没有错误。这是因为 Enzyme 对 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>
);

Answer 1

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

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