组件实例

¥Component Instance

mount 返回 VueWrapper，其中包含许多用于测试 Vue 组件的便捷方法。有时你可能需要访问底层 Vue 实例。你可以使用 vm 属性访问它。

¥mount returns a VueWrapper with lots of convenient methods for testing Vue components. Sometimes you might want access to the underlying Vue instance. You can access that with the vm property.

一个简单的例子

¥A Simple Example

这是一个简单的组件，它结合了 props 和数据来渲染问候语：

¥Here is a simple component that combines props and data to render a greeting:

test('renders a greeting', () => {
  const Comp = {
    template: `<div>{{ msg1 }} {{ msg2 }}</div>`,
    props: ['msg1'],
    data() {
      return {
        msg2: 'world'
      }
    }
  }

  const wrapper = mount(Comp, {
    props: {
      msg1: 'hello'
    }
  })

  expect(wrapper.html()).toContain('hello world')
})

让我们通过 console.log(wrapper.vm) 来看看 vm 上有哪些可用内容：

¥Let's take a look at what's available on vm by with console.log(wrapper.vm):

{
  msg1: [Getter/Setter],
  msg2: [Getter/Setter],
  hasOwnProperty: [Function]
}

我们可以看到 msg1 和 msg2！诸如 methods 和 computed 属性之类的内容也会显示（如果已定义）。编写测试时，虽然通常建议针对 DOM 进行断言（使用 wrapper.html() 之类的东西），但在极少数情况下，你可能需要访问底层 Vue 实例。

¥We can see both msg1 and msg2! Things like methods and computed properties will show up too, if they are defined. When writing a test, while it's generally recommended to assert against the DOM (using something like wrapper.html()), in some rare circumstances you might need access to the underlying Vue instance.

与 getComponent 和 findComponent 一起使用

¥Usage with getComponent and findComponent

getComponent 和 findComponent 返回 VueWrapper - 很像从 mount 得到的。这意味着你还可以访问 getComponent 或 findComponent 结果的所有相同属性，包括 vm。

¥getComponent and findComponent return a VueWrapper - much like the one get from mount. This means you can also access all the same properties, including vm, on the result of getComponent or findComponent.

这是一个简单的例子：

¥Here's a simple example:

test('asserts correct props are passed', () => {
  const Foo = {
    props: ['msg'],
    template: `<div>{{ msg }}</div>`
  }

  const Comp = {
    components: { Foo },
    template: `<div><foo msg="hello world" /></div>`
  }

  const wrapper = mount(Comp)

  expect(wrapper.getComponent(Foo).vm.msg).toBe('hello world')
  expect(wrapper.getComponent(Foo).props()).toEqual({ msg: 'hello world' })
})

测试这一点的更彻底的方法是针对渲染的内容进行断言。这样做意味着你断言正确的 prop 已传递并渲染。

¥A more thorough way to test this would be asserting against the rendered content. Doing this means you asserts the correct prop is passed and rendered.

使用 CSS 选择器时的 WrapperLike 类型

例如，当使用 wrapper.findComponent('.foo') 时，VTU 将返回 WrapperLike 类型。这是因为功能组件需要 DOMWrapper，否则需要 VueWrapper。你可以通过提供正确的组件类型强制返回 VueWrapper：

¥When using wrapper.findComponent('.foo') for example then VTU will return the WrapperLike type. This is because functional components would need a DOMWrapper otherwise a VueWrapper. You can force to return a VueWrapper by providing the correct component type:

wrapper.findComponent('.foo') // returns WrapperLike
wrapper.findComponent<typeof FooComponent>('.foo') // returns VueWrapper
wrapper.findComponent<DefineComponent>('.foo') // returns VueWrapper

结论

¥Conclusion

• 使用 vm 访问内部 Vue 实例

  ¥use vm to access the internal Vue instance

• getComponent 和 findComponent 返回一个 Vue 封装器。这些 Vue 实例也可以通过 vm 获得

  ¥getComponent and findComponent return a Vue wrapper. Those Vue instances are also available via vm