如何在没有像点击这样的触发事件的情况下测试钩子

Question

只要有某种类型的onClick、onChange等，似乎就有很多关于如何为钩子运行测试的内容，但如果你像下面这样将该函数传递给你的事件处理组件呢？

const Content: FC<Props> = ({ activeTab }) => {
const [count, setCount] = useState<number>(0);
function handleDateUpdate(dates: object) {
const totalCount = new GetTotal(dates, activeTab);
setCount(totalCount.totalAttendances());
}
useEffect(() => {
if (activeTab === 'Year') {
handleDateUpdate(new Date());
}
});
return (
<Container>
{activeTab === 'Month' && (
<Datepicker handleDateUpdate={handleDateUpdate} />
)}
<TotalAttendences count={count} />
</Container>
);
}

我想写一个测试，检查useEffect和handleDateUpdate中的if语句，以确保它正在做我想要做的事情。

Answer 1

如果您想测试是否调用了handleDateUpdate，我建议将其提取到辅助文件中，然后用export function导出。然后，通过执行以下操作将整个辅助文件导入到定义组件的文件中：import * as dateHelpers from '../path/to/file';

因此，当您调用组件中的函数时，您将以dateHelpers.handleDateUpdate的身份进行调用。这将确保正确注入依赖项，以便您能够监视您在组件中调用的handleDateUpdate函数的实例，以确保它被正确调用(或不被正确调用(。

由于activeTab是<Content />的道具，我将通过以下操作来测试useEffect：

import { shallow } from enzyme;
// I'm using enzyme here, but you could use whatever React testing library you choose
import * as dateHelpers from '../path/to/file/'
describe('<Content />', () => {
let dateUpdateSpy;
beforeEach(() => {
dateUpdateSpy = jest.spyOn(dateHelpers, 'handleDateUpdate'); 
})
afterEach(() => {
jest.clearAllMocks()
})
it('should invoke handleDateUpdate() when the activeTab prop equals "Year"'), () 
=> {
shallow(<Content activeTab="Year" />);
expect(dateUpdateSpy).toHaveBeenCalledWith(new Date());
}

it('should not invoke handleDateUpdate() when the activeTab prop does not equal 
"Year"'), () => {
shallow(<Content activeTab="Month" />);
expect(dateUpdateSpy).not.toHaveBeenCalled();
}
}

最后，您应该添加activeTab作为useEffect的依赖项，因为您只想在activeTab更改时运行该回调函数。它将在装载时运行，但如果由于activeTab更改之外的任何原因而出现重新发布程序，则将不必要地重新运行useEffect。所以我会把它改为：

useEffect(() => {
if (activeTab === 'Year') {
dateHelpers.handleDateUpdate(new Date());
}
}, [activeTab]);
``