在https://testing-library.com/docs/vue-testing-library/intro/之前,我使用了React测试库,但没有使用Vue测试库,我不想使用mount或shallowMount,因为我可以提供存根。我想弄清楚如何在VTL中执行此操作。
我们通常会有一些组件使用其他组件。所以当测试我们的组件时,比如ComponentA
,它可能会使用ComponentB
和ComponentC
。而有些组件我们希望呈现(ComponentA和ComponentB),并希望测试它们如何与我们的组件交互,那么还有其他(ComponentC),我们可能不想在这里测试它,因为它们有自己的测试。也就是说,我们想在测试ComponentA时“浅渲染”ComponentC。
使用react测试库,我们可以做到这一点:
import * as mockedComponentCModule from '....ComponentC';
jest.spyOn(mockedComponentCModule, 'ComponentC').mockImplementation(() => (
<div data-testid="mocked-component-c" />
));
或者我喜欢这个
jest.mock('path/to/my/ComponentC', () => ({
ComponentC: function ComponentC() {
return <div data-testid="mocked-component-c" />;
}
}));
因此,在react中,当我们执行render(<ComponentA />)
时,ComponentC
将呈现为简单的div
,而不是实际的组件。
我的问题是--如何使用Vue Testing Library来实现这一点?
1条答案
按热度按时间vyswwuz21#
我想我明白了:
如果有更好的方法--如果有人给我指出正确的方向,我会很感激的