vue-test-utils常用技巧1-5丨技术开发分享录

vue-test-utils常用技巧1-5

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 一、浅渲染\n\n浅渲染主要是针对独立单元组件,通过 `shallowMount` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根):\n\n```\nimport { shallowMount } from '@vue/test-utils'\n\nconst wrapper = shallowMount(Component)\nwrapper.vm // 挂载的 Vue 实例\n```\n\n## 二、生命周期钩子\n\n在使用 `mount` 或 `shallowMount` 方法时,可以期望组件响应 Vue 所有生命周期事件。但是请务必注意的是,除非使用 Wrapper.destroy(),否则 beforeDestroy 和 destroyed 将不会触发。\n\n此外组件在每个测试规范结束时并不会被自动销毁,并且将由用户来决定是否要存根或手动清理那些在测试规范结束前继续运行的任务 (例如 setInterval 或者 setTimeout)。\n\n## 三、使用 nextTick 编写异步测试代码\n\n```\nit('updates text', async () => {\n  const wrapper = mount(Component)\n  await wrapper.trigger('click')\n  expect(wrapper.text()).toContain('updated')\n  await wrapper.trigger('click')\n  wrapper.text().toContain('some different text')\n})\n\n// 或者你不希望使用 async/await\nit('render text', done => {\n  const wrapper = mount(TestComponent)\n  wrapper.trigger('click').then(() => {\n    wrapper.text().toContain('updated')\n    wrapper.trigger('click').then(() => {\n      wrapper.text().toContain('some different text')\n      done()\n    })\n  })\n})\n```\n\n## 四、断言触发的事件\n\n每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录。\n\n```\nwrapper.vm.$emit('foo')\nwrapper.vm.$emit('foo', 123)\n\n/*\n`wrapper.emitted()` 返回以下对象:\n{\n  foo: [[], [123]]\n}\n*/\n```\n\n然后你可以基于这些数据来设置断言:\n\n```\n// 断言事件已经被触发\nexpect(wrapper.emitted().foo).toBeTruthy()\n\n// 断言事件的数量\nexpect(wrapper.emitted().foo.length).toBe(2)\n\n// 断言事件的有效数据\nexpect(wrapper.emitted().foo[1]).toEqual([123])\n```\n\n你也可以调用 wrapper.emittedByOrder() 获取一个按触发先后排序的事件数组。\n\n## 五、从子组件触发事件\n\n待测试的组件\n\n```html\n<template>\n  <div>\n    <child-component @custom=\"onCustom\" />\n    <p v-if=\"emitted\">Emitted!</p>\n  </div>\n</template>\n\n<script>\n  import ChildComponent from './ChildComponent'\n\n  export default {\n    name: 'ParentComponent',\n    components: { ChildComponent },\n    data() {\n      return {\n        emitted: false\n      }\n    },\n    methods: {\n      onCustom() {\n        this.emitted = true\n      }\n    }\n  }\n</script>\n```\n\n测试代码\n\n```\nimport { mount } from '@vue/test-utils'\nimport ParentComponent from '@/components/ParentComponent'\nimport ChildComponent from '@/components/ChildComponent'\n\ndescribe('ParentComponent', () => {\n  it(\"displays 'Emitted!' when custom event is emitted\", () => {\n    const wrapper = mount(ParentComponent)\n    wrapper.find(ChildComponent).vm.$emit('custom')\n    expect(wrapper.html()).toContain('Emitted!')\n  })\n})\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看