Jest Vue：可以为快照加载动态导入吗？

发布于 2025-02-10 19:01:51 字数 862 浏览 0 评论 0原文

我正在尝试单元测试一个动态加载其子组件的VUE组件。问题是开玩笑 / vue utils似乎无法呈现它。有什么方法吗？

我的组件

<template>
  <component :is="component" v-bind="props" />
</template>

<script>
const components = {
  dog: () => import('./dog.vue'),
  cat: () => import('./cat.vue')
}

export default {
  props: { type: String }

  computed: {
    component() {
      return components[this.type]
    }

    props() { ... }
  }
}
</script>

这是我的测试

...
it('renders correctly', async () => {
  const wrapper = mount(Component, { ... })

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

，这是由此产生的快照文件，

// Jest Snapshot v1

exports[`Markdown Token renders correctly 1`] = `<!---->`;

谢谢:)

原文

I'm trying to unit test a Vue component that dynamically loads it's child component. The problem is that Jest / Vue utils doesn't seem to be able to render it. Is there any way of doing this?

My component

<template>
  <component :is="component" v-bind="props" />
</template>

<script>
const components = {
  dog: () => import('./dog.vue'),
  cat: () => import('./cat.vue')
}

export default {
  props: { type: String }

  computed: {
    component() {
      return components[this.type]
    }

    props() { ... }
  }
}
</script>

This is my test

...
it('renders correctly', async () => {
  const wrapper = mount(Component, { ... })

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

And this is the resulting snapshot file

// Jest Snapshot v1

exports[`Markdown Token renders correctly 1`] = `<!---->`;

Thanks in advance :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半边脸i 2025-02-17 19:01:51

我不知道为什么它不会在第一个加载周期内加载动态组件，但是您可以更新道具，以确保组件在检查快照之前会导入懒惰的组件。
在这些示例中，我试图重置type属性，以便在不久之后导入动态组件。

VUE UTILS示例：

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()
})

测试库示例：

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();
})

更新：

最佳方法可能是在检查快照之前加载懒惰的组件：

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

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

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

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();
})

回复收藏 0 原文

~没有更多了~