[Vuejs]-Jest Vue: Is it possible to load dynamic imports for snapshot?

by

1👍

✅

I don’t know why it doesn’t load the dynamic component in the first loading cycle but you can update the props to ensure the component will import the lazy-loaded component before checking the snapshot.
In these examples, I am trying to reset the type property, so that the dynamic component will be imported soon after.

Vue utils example:

test('render dog component', async () => {
  const wrapper = mount(Component, { ... });

  // Reset props if you have already passed it as `dog`
  await wrapper.setProps({ type: '' });
  // Now set it again.
  await wrapper.setProps({ type: 'dog' }); 

  expect(wrapper.element).toMatchSnapshot()
})

Testing library example:

test('render dog component', async () => {
  const { html, updateProps } = render(Component, { ... });

  // Reset props if you have already passed it as `dog`
  await updateProps({ type: '' });
  // Now set it again.
  await updateProps({ type: 'dog' }); 

  expect(html()).toMatchSnapshot();
})

Update:

The best approach might be loading lazy-loaded components before checking the snapshots:

test('render dog component', async () => {
  const { html } = render(Component, { ... });

  await Promise.all([import('./dog.vue'), import('./cat.vue')]); 

  expect(html()).toMatchSnapshot();
})
👤Ali Eslamifard

Leave a comment