Dynamic import components

[kjugi]

Testing dynamic imported components in our app

When running unit tests output seems to be cheated. In one test case it's unavailable and in second one test passes. It may lead to some unwanted results when testing app later.

I've observed that even when used loading state syntax we don't have loading or error component rendered.

Also need to mention that I saw #1198 but dunno is it the same issue here. In comparison to this issue my yarn.lock already contains babel-dynamic-import plugin from vue/cli. I'm not using stubs to 'fake' dynamic component.

Steps to reproduce

Here is the repo with the starter app and base test:
https://github.com/kjugi/vue-test-utils-dyn-import-problem

Start the tests by yarn test to see the problem

Expected behaviour

Both tests should fail due to dynamic import and don't render the component.

Actual behaviour

First test case failed but the second one has a success status. Looks like in second case it had time to render?

Possible Solution

Think that await wrapper.vm.$nextTick() should be used to render that kind of components but it's just an idea.

[lmiller1990]

Thanks for posting the repro - will dig into this a bit. There are a few other issues about this same problem.

[AtofStryker]

Hey @kjugi. I had some time to take a look at this and I believe this might not be a direct issues with VTU. This is rather a behavior of jest. Jest caches module imports and reuses these imported modules throughout the test. This means that the promise that is being referenced in the second test ( the HelloWorld import) is the same that was in the first, and happens to be settled. To avoid this, the module needs to be reset with jest.resetModules between tests, as well as reimporting the module under test. The below should work to solve your issue and fail both tests. Not the prettiest, I know 😄 , but it does work!

import { mount } from "@vue/test-utils";

describe("test", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("has default structure", async () => {
    const App = (await import("../src/App.vue")).default;
    const wrapper = mount(App);

    expect(wrapper.find(".hello").exists()).toBe(true);
  });

  it("loads dynamic import", async () => {
    const App = (await import("../src/App.vue")).default;
    const wrapper = mount(App);

    expect(wrapper.find(".hello").exists()).toBe(true);
  });
});

It is also worth noting that you can use require here as opposed to the dynamic import syntax