Skip to content

Mount method is impacted from previous test function #1050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hoangnkvti opened this issue Nov 29, 2018 · 6 comments
Closed

Mount method is impacted from previous test function #1050

hoangnkvti opened this issue Nov 29, 2018 · 6 comments
Labels

Comments

@hoangnkvti
Copy link

Version

1.0.0-beta.26

Steps to reproduce

I write some test for my child component. But below mount function can not render child component, if above function use shallowMount. But when I change first test function to mount, below function work properly.

What is expected?

Function mount work properly

What is actually happening?

Function mount doesn't work properly


Here is my code:

test('test UI with create User', () => {
    const wrapper = shallowMount(AddUser, {
      localVue,
      store,
      mocks: {
        $router,
      },
    });
    console.log(wrapper.html());
    expect(wrapper.find('alertpanel-stub').exists()).toBe(true);
    expect(wrapper.find('userform-stub').exists()).toBe(true);
    expect(wrapper.find('button[id="addBtn"]').exists()).toBe(true);
  });
  test('add user with invalid input', async () => {
    const wrapper = mount(AddUser, {
      localVue,
      store,
      mocks: {
        $router,
      },
    });
    console.log(wrapper.html());
    wrapper.find('#addBtn').trigger('click');
    await flushPromises();
    expect(wrapper.vm.errors.count()).toBeGreaterThan(0);
  });
@eddyerburgh
Copy link
Member

Thanks for the bug report.

Can you please post a full code reproduction (that I can run) in a GitHub repository.

@staskobzar
Copy link

staskobzar commented Nov 30, 2018

Good day,

I think I have this problem too, since yesterday, after upgrade.

@vue/test-utils version 1.0.0-beta.26

I have a component with child component. Top level component, "Buddies", has nested component "BuddyCard". When top level component "Buddies" is mounted it looks more like shallowMount result.

Here is how I mount:

const cmp = mount(Buddies, {store, localVue, stubs: ['v-tooltip', 'v-menu']})

The result html (from cmp.html()) has component tag "<buddycard>":

<div class="layout row wrap">
  <div class="flex d-flex xs3">
    <buddycard buddy="[object Object]"></buddycard>
  </div>
</div>

While I expect to have html code of "buddycard" component.

Thanks!

@Aspern
Copy link

Aspern commented Nov 30, 2018

We have the same issue since @vue/test-utils version 1.0.0-beta.26

@eddyerburgh
Copy link
Member

Can somebody with this issue post a full reproduction that I can run, ideally in a GitHub repo.

@ashleysimpson
Copy link

Hey @eddyerburgh, I seem to be having the same issue after updating to 1.0.0-beta.26. It seems that the issue only happens when using vue-test-utils with vuex.

https://github.com/ashleysimpson/vue-test-utils-jest-example

You can clone this repo and just run the tests and see that the mount is not doing what is expected. Let me know if you have any issues.

@boboldehampsink
Copy link

Same here in combination with Vuex. Tests that have nothing to do with Vuex now start failing. On inspection I find that in a test where I use vue router with localvue the router-link now automatically gets stubbed. When I disable Vuex it passes. This is on beta 25 even.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants