javascript - Vue Testing Library: How to mock Vue component - Stack Overflow

admin管理员组

文章数量:1023230

I used React Testing-Library, but not Vue Testing-Library before / 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 ponents that use other ponents. So when testing our ponent say ComponentA it may use ComponentB and ComponentC. While there are some ponents that we want to be rendered (ComponentA and ComponentB) and want to test how they interact with our ponent, 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-ponent-c" />
));

or I like this

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

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

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

I used React Testing-Library, but not Vue Testing-Library before https://testing-library./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 ponents that use other ponents. So when testing our ponent say ComponentA it may use ComponentB and ComponentC. While there are some ponents that we want to be rendered (ComponentA and ComponentB) and want to test how they interact with our ponent, 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-ponent-c" />
));

or I like this

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

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

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

• javascript
• vue.js
• jestjs
• vue-testing-library

Share Improve this question Follow edited Jan 8, 2023 at 2:41 nsimeonov asked Jan 8, 2023 at 0:34 nsimeonovnsimeonov 74499 silver badges2020 bronze badges 2

• Does this answer your question? How to fix this error [Vue warn]: Unknown custom element: <nuxt-link> in unit testing with Jest – 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 Commented Jan 8, 2023 at 2:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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-ponent-name': {
          render: () => ({}),
          methods: {
            open: openEventMock
          }
        },
      }
    });

I think I figured it out:

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

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

I used React Testing-Library, but not Vue Testing-Library before / 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 ponents that use other ponents. So when testing our ponent say ComponentA it may use ComponentB and ComponentC. While there are some ponents that we want to be rendered (ComponentA and ComponentB) and want to test how they interact with our ponent, 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-ponent-c" />
));

or I like this

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

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

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

I used React Testing-Library, but not Vue Testing-Library before https://testing-library./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 ponents that use other ponents. So when testing our ponent say ComponentA it may use ComponentB and ComponentC. While there are some ponents that we want to be rendered (ComponentA and ComponentB) and want to test how they interact with our ponent, 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-ponent-c" />
));

or I like this

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

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

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

• javascript
• vue.js
• jestjs
• vue-testing-library

Share Improve this question Follow edited Jan 8, 2023 at 2:41 nsimeonov asked Jan 8, 2023 at 0:34 nsimeonovnsimeonov 74499 silver badges2020 bronze badges 2

• Does this answer your question? How to fix this error [Vue warn]: Unknown custom element: <nuxt-link> in unit testing with Jest – 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 Commented Jan 8, 2023 at 2:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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-ponent-name': {
          render: () => ({}),
          methods: {
            open: openEventMock
          }
        },
      }
    });

I think I figured it out:

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

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

本文标签： javascriptVue Testing Library How to mock Vue componentStack Overflow