vue-test-utils挂载选项丨技术开发分享录

vue-test-utils挂载选项

{{ detail.nickname }}

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

"此挂载选项即`Mount`和`shallowMount`的选项,这些选项将会合并到组件现有的选项中。\n\n选项列表:\n\n- context\n- data\n- slots\n- scopedSlots\n- stubs\n- mocks\n- localVue\n- attachTo\n- propsData\n- attrs\n- listeners\n- parentComponent\n- provide\n\n## 一、context\n\n将上下文传递给函数式组件。该选项只能用于[函数式组件](https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6)。\n\n```\nimport Foo from './Foo.vue'\nimport Bar from './Bar.vue'\n\nconst Parent = {\n  functional: true,\n  render(createElement, context) {\n    return createElement('div', context.props, context.children);\n  }\n}\n\nconst wrapper = mount(Parent, {\n  context: {\n    props: { show: true },\n    children: [Foo, Bar]\n  }\n})\n\nexpect(wrapper.is(Parent)).toBe(true)\n```\n\n## 二、data\n\n向组件传放数据,这将会合并到现有的 `data` 函数中。\n\n```\nconst Component = {\n  template: `\n    <div>\n      <span id=\"foo\">{{ foo }}</span>\n      <span id=\"bar\">{{ bar }}</span>\n    </div>\n  `,\n  data() {\n    return {\n      foo: 'foo',\n      bar: 'bar'\n    }\n  }\n}\n\nconst wrapper = mount(Component, {\n  data() {\n    return {\n      bar: 'bar-override'\n    }\n  }\n})\n\nwrapper.find('#foo').text() // 'foo'\nwrapper.find('#bar').text() // 'bar-override'\n```\n\n## 三、slots\n\n类型:`{ [name: string]: Array<Component>|Component|string }`\n\n为组件提供一个 slot 内容的对象。该对象中的键名就是相应的 slot 名,键值可以是一个组件或一个组件数组或一个字符串模板或文本。\n\n```\nimport Foo from './Foo.vue'\nimport MyComponent from './MyComponent.vue'\n\nconst bazComponent = {\n  name: 'baz-component',\n  template: '<p>baz</p>'\n}\n\nconst yourComponent = {\n  props: {\n    foo: {\n      type: String,\n      required: true\n    }\n  },\n  render(h) {\n    return h('p', this.foo)\n  }\n}\n\nconst wrapper = shallowMount(Component, {\n  slots: {\n    default: [Foo, '<my-component />', 'text'],\n    fooBar: Foo, // 将会匹配 `<slot name=\"FooBar\" />`.\n    foo: '<div />',\n    bar: 'bar',\n    baz: bazComponent,\n    qux: '<my-component />',\n    quux: '<your-component foo=\"lorem\"/><your-component :foo=\"yourProperty\"/>'\n  },\n  stubs: {\n    // 用来注册自定义组件\n    'my-component': MyComponent,\n    'your-component': yourComponent\n  },\n  mocks: {\n    // 用来向渲染上下文添加 property\n    yourProperty: 'ipsum'\n  }\n})\n\nexpect(wrapper.find('div')).toBe(true)\n```\n\n## 四、scopedSlots\n\n类型:`{ [name: string]: string|Function }`\n\n提供一个该组件所有作用域插槽的对象。每个键对应到插槽的名字。\n\n你可以使用 slot-scope 特性设置 prop 的名称:\n\n```\nconst Component = {\n  props: {\n    index: {\n      type: String,\n      default: 1\n    },\n    text: {\n      type: String,\n      default: 'tom'   \n    }\n  },\n  template: `<div v-slot=\"{index, text}\"></div>`\n}\n\nshallowMount(Component, {\n  scopedSlots: {\n    foo: '<p slot-scope=\"foo\">{{foo.index}},{{foo.text}}</p>'\n  }\n})\n```\n\n默认形式\n\n```\nshallowMount(Component, {\n  scopedSlots: {\n    default: '<p>{{props.index}},{{props.text}}</p>'\n  }\n})\n```\n\n可以是一个函数,把props代入\n\n```\nshallowMount(Component, {\n  scopedSlots: {\n    foo: function(props) {\n      return this.$createElement('div', props.index)\n    }\n  }\n})\n```\n\nJSX写法\n\n```\nshallowMount(Component, {\n  scopedSlots: {\n    foo(props) {\n      return <div>{props.text}</div>\n    }\n  }\n})\n```\n\n## 五、stubs\n\n类型:`{ [name: string]: Component | string | boolean } | Array<string> }`\n\n将子组件存根。可以是一个要存根的组件名的数组或对象。如果 stubs 是一个数组,则每个存根都是一个 <${component name}-stub>。\n\n>[warning] 废弃:当对组件存根时,提供一个字符串的方式 `(ComponentToStub: '<div class=\"stubbed\" />)` 已经不再被支持。\n\n```\nimport Foo from './Foo.vue'\n\nmount(Component, {\n  stubs: ['registered-component']\n})\n\nshallowMount(Component, {\n  stubs: {\n    // 使用一个特定的实现作为存根\n    'registered-component': Foo,\n    // 使用创建默认的实现作为存根。\n    // 这里默认存根的组件名是 `another-component`。\n    // 默认存根是 `<${the component name of default stub}-stub>`。\n    'another-component': true\n  }\n})\n```\n\n## 六、mocks\n\n类型:`Object`\n\n为实例添加额外的属性。在伪造全局注入的时候有用。\n\n```\nconst $route = { path: 'http://www.xxx.com' }\nconst wrapper = shallowMount(Component, {\n  mocks: {\n    $route\n  }\n})\nexpect(wrapper.vm.$route.path).toBe($route.path)\n```\n\n$root根\n\n```\nwrapper.vm.$root = { loading: true }\nwrapper.vm.$forceUpdate()\n```\n\nparentComponent父组件\n\n```\nconst Parent = {\n  data() {\n    return {\n      loading: \"asdas\"\n    };\n  }\n};\nconst wrapper = shallowMount(TestComponent, {\n  parentComponent: Parent\n});\n```\n\n## 七、localVue\n\n类型:`Vue`\n\n通过 [./createLocalVue.md] 创建的一个 Vue 的本地拷贝,用于挂载该组件的时候。在这份拷贝上安装插件可以防止原始的 Vue 被污染。\n\n```\nimport { createLocalVue, mount } from '@vue/test-utils'\nimport VueRouter from 'vue-router'\nimport Foo from './Foo.vue'\n\nconst localVue = createLocalVue()\nlocalVue.use(VueRouter)\n\nconst routes = [{ path: '/foo', component: Foo }]\n\nconst router = new VueRouter({\n  routes\n})\n\nconst wrapper = mount(Component, {\n  localVue,\n  router\n})\nexpect(wrapper.vm.$route).toBeInstanceOf(Object)\n```\n\n## 八、attachTo\n\n类型:`HTMLElement` | `string` 默认:`null`\n\n指定一个 `HTMLElement` 或定位到一个 HTML 元素的 CSS 选择器字符串,组件将会被完全挂载到文档中的这个元素。\n\n当要挂载到 DOM 时,你需要在测试的结尾调用 `wrapper.destroy()` 以将该元素从文档中移除,并销毁该组件实例。\n\n```\nconst Component = {\n  template: '<div>ABC</div>'\n}\nlet wrapper = mount(Component, {\n  attachTo: '#root'\n})\nexpect(wrapper.vm.$el.parentNode).to.not.be.null\nwrapper.destroy()\n\nwrapper = mount(Component, {\n  attachTo: document.getElementById('root')\n})\nexpect(wrapper.vm.$el.parentNode).to.not.be.null\nwrapper.destroy()\n```\n\n## 九、attrs\n\n类型:`Object`\n设置组件实例的 $attrs 对象。\n\n## 十、propsData\n\n类型:`Object`\n在组件被挂载时设置组件实例的 prop。\n\n```\nconst Component = {\n  template: '<div>{{ msg }}</div>',\n  props: ['msg']\n}\nconst wrapper = mount(Component, {\n  propsData: {\n    msg: 'aBC'\n  }\n})\nexpect(wrapper.text()).toBe('aBC')\n```\n\n>[success] 提示:值得注意的是 propsData 实际上是一个 Vue API,不是 Vue Test Utils 的挂载选项。它会被 extends 处理。请查阅其它选项。\n\n## 十一、listeners\n\n类型:`Object`\n设置组件实例的 `$listeners` 对象。\n\n```\nconst Component = {\n  template: '<button v-on:click=\"$emit(\\'click\\')\"></button>'\n}\nconst onClick = jest.fn()\nconst wrapper = mount(Component, {\n  listeners: {\n    click: onClick\n  }\n})\n\nwrapper.trigger('click')\nexpect(onClick).toHaveBeenCalled()\n```\n\n## 十二、parentComponent\n\n类型:`Object`\n用来作为被挂载组件的父级组件。\n\n```\nimport Foo from './Foo.vue'\n\nconst wrapper = shallowMount(Component, {\n  parentComponent: Foo\n})\nexpect(wrapper.vm.$parent.$options.name).toBe('foo')\n```\n\n## 十三、provide\n\n类型:`Object`\n为组件传递用于注入的属性。可查阅 `provide/inject` 了解更多。\n\n```\nconst Component = {\n  inject: ['foo'],\n  template: '<div>{{this.foo()}}</div>'\n}\n\nconst wrapper = shallowMount(Component, {\n  provide: {\n    foo() {\n      return 'fooValue'\n    }\n  }\n})\n\nexpect(wrapper.text()).toBe('fooValue')\n```\n\n## 十四、其它选项\n\n当 `mount` 和 `shallowMount` 的选项包含了挂载选项之外的选项时,则会将它们通过扩展覆写到其组件选项。\n\n```\nconst Component = {\n  template: '<div>{{ foo }}</div>',\n  data() {\n    return {\n      foo: 'fromComponent'\n    }\n  }\n}\nconst options = {\n  data() {\n    return {\n      foo: 'fromOptions'\n    }\n  }\n}\n\nconst wrapper = mount(Component, options)\n\nexpect(wrapper.text()).toBe('fromOptions')\n```"
PS:写作不易,如要转裁,请标明转载出处。

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

猜你想看