shallowMount() behaves like mount() when components are lazy loaded #1279

xavism · 2019-07-22T10:02:50Z

Version

1.0.0-beta.29

Reproduction link

https://github.com/xavism/lazyloading-vue-test-utils

Steps to reproduce

$ npm i
$ npm t

Then check the snapshots

What is expected?

Both snapshots (Parent and ParentLazy) are expected to be the same. shallowMount should stub the child components

What is actually happening?

ParentLazy's snapshot is rendering the Child component when using shallowMount, the child component in the snapshot is not stubbed

Related to a closed issue:

shallowMount will not stubs lazily registered components #959
#959

It should be fixed but it's not working in my case.

xavism · 2019-07-22T10:03:23Z

Duplicate of #959
Reopened

anipendakur · 2019-10-24T20:40:34Z

Hi there, I was wondering if there's any update on this.. We have the exact same issue.

krausweb · 2019-11-06T10:33:41Z

As I see in your Github you are using the Jest, lazy load (() => import) and of course NodeJS.

"Jest runs in Node, and thus requires ES modules to be transpiled to CommonJS modules.
If you use dynamic imports (import('some-file.js').then(module => ...)), you need to enable the dynamic-import-node plugin"
See Jest docs https://jestjs.io/docs/en/webpack.html#using-with-webpack-2

Solution:
Need to install the babel-plugin-dynamic-import-node (https://www.npmjs.com/package/babel-plugin-dynamic-import-node).
Or the import works only with "--experimental-modules" in NodeJS(current LTS https://nodejs.org/dist/latest-v12.x/docs/api/esm.html#esm_enabling).

// my .babelrc

{
    "env": {
        "test": {
            "presets": [
                ["env", {
                    "targets": {
                        "node": "current"
                    }
                }]
            ],
            "plugins": ["dynamic-import-node"]
        }
    }
}

// my jest.config.js

module.exports = {
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    'transform': {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
    },
};

// my env:

Laravel v5.8.23;
main "devDependencies":
"jest": "^24.9.0",

"vue": "^2.5.17",
"vue-jest": "^3.0.5",
"@vue/test-utils": "^1.0.0-beta.29",

"babel-core": "^6.26.3",
"babel-jest": "^24.9.0",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-preset-env": "^1.7.0",

"laravel-mix": 4.0.7,

the Docker image with NodeJS v8

miguelrincon · 2019-11-07T06:21:44Z

I face a similar issue when using to dynamic components as the components that are set get fully rendered.

Would a fix for this issue cover this use case as well?

xavism · 2019-11-18T17:05:43Z

As I see in your Github you are using the Jest, lazy load (() => import) and of course NodeJS.

"Jest runs in Node, and thus requires ES modules to be transpiled to CommonJS modules.
If you use dynamic imports (import('some-file.js').then(module => ...)), you need to enable the dynamic-import-node plugin"
See Jest docs https://jestjs.io/docs/en/webpack.html#using-with-webpack-2

Solution:
Need to install the babel-plugin-dynamic-import-node (https://www.npmjs.com/package/babel-plugin-dynamic-import-node).
Or the import works only with "--experimental-modules" in NodeJS(current LTS https://nodejs.org/dist/latest-v12.x/docs/api/esm.html#esm_enabling).

// my .babelrc
{
    "env": {
        "test": {
            "presets": [
                ["env", {
                    "targets": {
                        "node": "current"
                    }
                }]
            ],
            "plugins": ["dynamic-import-node"]
        }
    }
}
// my jest.config.js
module.exports = {
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    'transform': {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
    },
};
// my env:

Laravel v5.8.23;

main "devDependencies":
"jest": "^24.9.0",

"vue": "^2.5.17",
"vue-jest": "^3.0.5",
"@vue/test-utils": "^1.0.0-beta.29",

"babel-core": "^6.26.3",
"babel-jest": "^24.9.0",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-preset-env": "^1.7.0",

"laravel-mix": 4.0.7,

the Docker image with NodeJS v8

I've added your solution to the reproduction package ( https://github.com/xavism/lazyloading-vue-test-utils) and it is still not working.
Could you tell me what am I doing wrong?

Zilvinaskli · 2020-01-21T14:06:11Z

have you found a solution for that?

xavism · 2020-01-21T14:08:59Z

have you found a solution for that?

Unfortunately no :(

seoplay · 2020-02-19T13:59:22Z

still no update on this?

lmiller1990 · 2020-03-14T23:50:11Z

So I think the reason this happens is because the way shallowMount works is by overriding this.$createElement to stub out components before they are mounted. Since the import is async (lazy), the component is loaded after all the stubbing has occurred.

If my guess is correct, this is not something we can fix without a major rework of the library. The only suggested I can come up with to make your snapshots match is to use mount. I don't think this is so bad; using mount will make your snapshot more closely resemble your production code.

If anyone wants to dig into this one, I can provide some guidance or even pair with you on it.

rdunk · 2020-03-16T15:29:29Z

As a less-than-ideal workaround, you can explicitly provide stubs for async components.

Dinuz · 2020-03-25T00:41:11Z

I am having the same issue, I lazy load my components, and shallowMount behave like mount, but mount itself doesn't really work.
I need to explicitly setup the stubs for my child component in shallowMount, and then it works properly.
If instead I try to use mount, the stub is not be consider at all.

I created a factory function to switch easily between mount and shallow, but mount just doesn't work.

lmiller1990 · 2020-03-26T11:49:51Z

Call me crazy but if you are loading a component why would you want to use shallowMount? That will stub out your async component (now you can't test it, because it's stubbed out).

xavism · 2020-03-26T11:57:51Z

Hi @lmiller1990 , first of all thanks for your time.
In my case, I want to use shallowMount even when I'm lazy-loading my child components because I don´t want to add to my localVue the dependencies this child components needs.
Does it make sense?

lmiller1990 · 2020-03-26T12:14:40Z

I see, makes sense. Time for a deep dive into the dark depths of shallowMount!

CodePlato3721 · 2020-05-13T05:50:21Z

Since shallowMount() behaves like mount(). I'm thinking about consider this problem in the opposite way: make mount() behaves like shallowMount.

For example, Parent component lazy load Child component

<template>
  <div>
    Parent
    <Child />
  </div>
</template>

<script>

export default {
  components: {
    Child: () => import('./Child')
  }
}
</script>

Step 1. Change shallowMount into mount in unit tests

const wrapper = mount(Parent)

Step 2. Add stubs option to mount

const wrapper = mount(Parent, {
      stubs: {
        Child: true
    }
  })

The child component will be mount as <child-stub></child-stub> like we are using shallowMount.

lmiller1990 · 2020-05-13T09:52:07Z

^ seems like a good work around!

CodePlato3721 · 2020-05-13T18:49:58Z

@lmiller1990 I wonder that if mount can make child stub as <child-stub> exactly like the same thing shallowMount would do. Why shallowMount can't do it? Is there anything blocks this process? Would it be possible to let shallowMount be improved to compatible with dynamic import if we found the things block the process?

lmiller1990 · 2020-05-13T22:29:51Z

I have no idea why this happens, I took a look but didn't have much luck fixing it. I would probably need to spend more time on it.

If you would like to try figuring it out I can try to help out. I personally recommend against using shallowMount - what is your use-case that prevents you from using mount?

dobromir-hristov · 2020-05-14T05:25:42Z

I have tried hacking this as well many times, alas got nowhere... I think this is finally fixed in VTU 2 though 😄

Ariane-B · 2020-11-03T15:47:01Z

@dobromir-hristov Do we have a confirmation that it's actually fixed in Vue Test Utils 2 / Vue 3?

lmiller1990 · 2020-11-04T03:05:00Z

I just cloned and updated the repo linked in the first post. I used Vue 3, VTU v2 and ts-jest v25. The first two tests passed fine, I had to update the snapshots with -u and then everything was green.

So yep, seems fine. This is because the shallow mounting is (kind of) baked into Vue core now via a transformVNodeArgs function.

Of course that is in a different codebase using different dependencies - I do not expect this issue will be fixed in VTU v1 (for Vue 2) at this point.

ebisbe · 2023-01-27T15:49:16Z

@lmiller1990 Should I mark this ticket as won't fix and close it or as a bug and leave it open?

lmiller1990 · 2023-01-29T23:55:29Z

Considering how much time has passed and how complex this likely is to fix, I'd say closed and wontfix is probably fine -- it's clear there isn't a lot of motivation to fix this particular issue.

pmrotule · 2023-09-21T07:04:10Z

I just wanted to mention that we had this issue before and it simply went away after upgrading from Vue 2.5 to 2.7. We're on Jest v29.

lmiller1990 mentioned this issue Apr 6, 2020

Store is undefined in dynamically loaded child component #1486

Closed

ninofiliu mentioned this issue Dec 31, 2021

Can not get lazy-loaded / async component #1944

Closed

wadakatu mentioned this issue Nov 5, 2022

Cannot stub child component properly with shallowMount method. #2021

Closed

ebisbe closed this as completed Jan 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

shallowMount() behaves like mount() when components are lazy loaded #1279

shallowMount() behaves like mount() when components are lazy loaded #1279

xavism commented Jul 22, 2019

xavism commented Jul 22, 2019

anipendakur commented Oct 24, 2019

krausweb commented Nov 6, 2019

miguelrincon commented Nov 7, 2019

xavism commented Nov 18, 2019

Zilvinaskli commented Jan 21, 2020

xavism commented Jan 21, 2020

seoplay commented Feb 19, 2020

lmiller1990 commented Mar 14, 2020 •

edited

Loading

rdunk commented Mar 16, 2020

Dinuz commented Mar 25, 2020 •

edited

Loading

lmiller1990 commented Mar 26, 2020

xavism commented Mar 26, 2020

lmiller1990 commented Mar 26, 2020

CodePlato3721 commented May 13, 2020

lmiller1990 commented May 13, 2020

CodePlato3721 commented May 13, 2020 •

edited

Loading

lmiller1990 commented May 13, 2020

dobromir-hristov commented May 14, 2020

Ariane-B commented Nov 3, 2020

lmiller1990 commented Nov 4, 2020 •

edited

Loading

ebisbe commented Jan 27, 2023

lmiller1990 commented Jan 29, 2023

pmrotule commented Sep 21, 2023

shallowMount() behaves like mount() when components are lazy loaded #1279

shallowMount() behaves like mount() when components are lazy loaded #1279

Comments

xavism commented Jul 22, 2019

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

xavism commented Jul 22, 2019

anipendakur commented Oct 24, 2019

krausweb commented Nov 6, 2019

miguelrincon commented Nov 7, 2019

xavism commented Nov 18, 2019

Zilvinaskli commented Jan 21, 2020

xavism commented Jan 21, 2020

seoplay commented Feb 19, 2020

lmiller1990 commented Mar 14, 2020 • edited Loading

rdunk commented Mar 16, 2020

Dinuz commented Mar 25, 2020 • edited Loading

lmiller1990 commented Mar 26, 2020

xavism commented Mar 26, 2020

lmiller1990 commented Mar 26, 2020

CodePlato3721 commented May 13, 2020

lmiller1990 commented May 13, 2020

CodePlato3721 commented May 13, 2020 • edited Loading

lmiller1990 commented May 13, 2020

dobromir-hristov commented May 14, 2020

Ariane-B commented Nov 3, 2020

lmiller1990 commented Nov 4, 2020 • edited Loading

ebisbe commented Jan 27, 2023

lmiller1990 commented Jan 29, 2023

pmrotule commented Sep 21, 2023

lmiller1990 commented Mar 14, 2020 •

edited

Loading

Dinuz commented Mar 25, 2020 •

edited

Loading

CodePlato3721 commented May 13, 2020 •

edited

Loading

lmiller1990 commented Nov 4, 2020 •

edited

Loading