Vue测试库:如何模拟Vue组件

ckx4rj1h  于 2023-01-09  发布在  Vue.js
关注(0)|答案(1)|浏览(149)

https://testing-library.com/docs/vue-testing-library/intro/之前,我使用了React测试库,但没有使用Vue测试库,我不想使用mount或shallowMount,因为我可以提供存根。我想弄清楚如何在VTL中执行此操作。
我们通常会有一些组件使用其他组件。所以当测试我们的组件时,比如ComponentA,它可能会使用ComponentBComponentC。而有些组件我们希望呈现(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来实现这一点?

vyswwuz2

vyswwuz21#

我想我明白了:

jest.spyOn(mockedComponentCModule.default, 'render').mockImplementation((create) =>
    create('div', { attrs: { 'data-testid': 'mocked-component-c' } }, 'Test Content')
);

如果有更好的方法--如果有人给我指出正确的方向,我会很感激的

相关问题