二、测试 Vue.js 组件

到目前为止，我们已经了解了如何使用浅层渲染单独测试组件，从而防止组件的子树渲染。

但在某些情况下，我们想要测试作为一个基团的组分，或分子（）http://atomicdesign.bradfrost.com/chapter-2/#molecules ），如原子设计所述。请记住，这适用于呈现组件（https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0，因为他们不知道应用程序状态和逻辑。在大多数情况下，您可能会对容器组件使用浅层渲染。

添加消息组件

对于Message和MessageList组件，除了编写各自的单元测试之外，我们可能还希望将它们作为一个单元进行测试。

让我们从创建components/Message.vue开始：

<template>
  <li class="message">{{ message }}</li>
</template>
<script>
  export default {
    props: ["message"]
  };
</script>

并更新components/MessageList.vue使用：

<template>
  <ul>
    <Message :message="message" v-for="message in messages" />
  </ul>
</template>
<script>
  import Message from "./Message";
  export default {
    props: ["messages"],
    components: {
      Message
    }
  };
</script>

使用消息组件测试消息列表

为了测试MessageList的深度渲染，我们只需要在之前创建的test/MessageList.test.js中使用mount而不是shallowMount：

import { mount } from "@vue/test-utils";
import MessageList from "../src/components/MessageList";
describe("MessageList.test.js", () => {
  let cmp;
  beforeEach(() => {
    cmp = mount(MessageList, {
      // Be aware that props is overridden using 'propsData'
      propsData: {
        messages: ["Cat"]
      }
    });
  });
  it('has received ["Cat"] as the message property', () => {
    expect(cmp.vm.messages).toEqual(["Cat"]);
  });
  it("has the expected html structure", () => {
    expect(cmp.element).toMatchSnapshot();
  });
});

顺便问一下，你注意到那件事了吗？这是一种非常干净的方法，可以在每次测试之前创建干净的组件，这在单元测试中非常重要，因为它定义了测试不应该相互依赖。

mount和shallowMount使用完全相同的 API；区别在于渲染。在本系列中，我将逐步向您展示更多 API。

如果您运行npm t，您将看到测试失败，因为快照与MessageList.test.js不匹配。要重新生成它，请使用-u选项运行：

npm t -- -u

然后，如果您打开并检查test/__snapshots__/MessageList.test.js.snap，您将看到class="message"在那里，这意味着组件已被渲染：

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports['MessageList.test.js has the expected html structure 1'] = '
<ul>
  <li class="message">
    Cat
  </li>
</ul>
';

请记住，在可能存在副作用的情况下避免深度渲染，因为子组件挂钩（如created和mount）将被触发，并且可能存在 HTTP 调用或其他我们不希望被调用的副作用。如果你想试试我说的话，在created钩子中的Message.vue组件中添加一个console.log：

export default {
  props: ["message"],
  created() {
    console.log("CREATED!");
  }
};

然后，如果使用npm t再次运行测试，您将在终端输出中看到"CREATED!"文本。所以，要小心。

您可以在GitHub（上找到本章的代码和示例 https://github.com/alexjoverm/vue-testing-series/tree/Test-fully-rendered-Vue-js-Components-in-Jest ）。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/13389.html