Vue Testing Library: How to mock Vue component

Question

I used React Testing-Library, but not Vue Testing-Library before https://testing-library.com/docs/vue-testing-library/intro/ and I don't want to use mount or shallowMount where I can provide a stub. I want to figure out how to do that in VTL.

We usualy have components that use other components. So when testing our component say ComponentA it may use ComponentB and ComponentC. While there are some components that we want to be rendered (ComponentA and ComponentB) and want to test how they interact with our component, there are also others (ComponentC), which we may not want to test here, because they have their own tests. I.e. we want to "shallow-render" ComponentC when testing ComponentA.

Using react testing library we can do this:

import * as mockedComponentCModule from '....ComponentC';

jest.spyOn(mockedComponentCModule, 'ComponentC').mockImplementation(() => (
    <div data-testid="mocked-component-c" />
));

or I like this

jest.mock('path/to/my/ComponentC', () => ({
    ComponentC: function ComponentC() {
        return <div data-testid="mocked-component-c" />;
    }
}));

So in react when we do render(<ComponentA />) the ComponentC will render as a simple div instead of the actual component.

My question is - how can I do this with Vue Testing Library?

Does this answer your question? How to fix this error [Vue warn]: Unknown custom element: <nuxt-link> in unit testing with Jest — Naren
– Naren, Commented Jan 8, 2023 at 2:23
Nope. I want to use vue-testing-library, which uses render. I don't want to use mount or shallowMount — nsimeonov
– nsimeonov, Commented Jan 8, 2023 at 2:38

Csonter · Accepted Answer · 2023-04-04 15:11:49Z

3

I think what you are looking for is stubs.

With vue testing library you can do this:

const wrapper = render(Component, { stubs: { ComponentToStub: true } }

Or instead of true you could also provide a string I think.

answered Apr 4, 2023 at 15:11

Csonter

567 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nsimeonov Over a year ago

So the alternative to solution, provided by me, would be

const wrapper = render(Component, { stubs: { ComponentC: '<div data-testid="mocked-component-c">Test Content</div>' } });

nsimeonov Over a year ago

Both solutions work, but yours seem to be more concise and feeling more appropriate to the task at hand. THANK YOU!

adrisons · Accepted Answer · 2024-04-11 10:41:57Z

2

In case you are using @vue/test-utils library, you can provide a mock implementation like this:

    const openEventMock = jest.fn();

    const wrapper = mount(ComponentName, {
      stubs: {
        'kebab-case-child-component-name': {
          render: () => ({}),
          methods: {
            open: openEventMock
          }
        },
      }
    });

answered Apr 11, 2024 at 10:41

adrisons

3,7335 gold badges35 silver badges52 bronze badges

1 Comment

nsimeonov Over a year ago

Sorry, my question is specifically about Vue Testing-Library. I found multiple examples like this, but none about VTL

nsimeonov · Accepted Answer · 2023-01-08 02:24:48Z

0

I think I figured it out:


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

Now sure if there's a better way - I'd be thankful if someone points me in the right direction

answered Jan 8, 2023 at 2:24

nsimeonov

74410 silver badges20 bronze badges

1 Comment

nsimeonov Over a year ago

Accepting my answer since I didn't get any better suggestion.

Collectives™ on Stack Overflow

Vue Testing Library: How to mock Vue component

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related