为什么我的单元测试无法返回单文件组件中的文本，我在挂载的钩子上使用 $el.innerText 设置该文本

Question

问题摘要

我有内容可编辑div接收一个默认值为空字符串的 content 属性。我没有使用 mustache 语法来渲染属性{{ content }}，而是通过挂载的钩子设置元素 innerText：

mounted() {this.$el.innerText = this.content}

我

创建了一个单元测试来验证组件的文本是否包含我传递到测试中的模拟属性。

该组件在浏览器中正确呈现，但单元测试失败，提醒我它没有找到任何文本。

我尝试过的事情

如果我登录wrapper.vm.$el.innerText我会看到我模拟的字符串。

如果我使用胡须语法(而不是挂载方法(，即<div>}{{ content}}</div>，测试通过。

Vue 单文件组件

<template>
  <div
    contenteditable="true"/>
</template>
<script>
  export default {
    props: {
      content: {
        default: '',
        type: String,
      },
    },
    mounted() {
      this.$el.innerText = this.content;
    },
  }
</script>

单元测试

describe('BaseEditable.vue', () => {
  it('renders content property', () => {
    const wrapper = shallowMount(BaseEditable, {
      propsData: {
        content: 'some random string',
      },
    });
    expect(wrapper.text()).toContain('some random string');
});

我

的期望，我得到了什么

我希望测试通过。

但是，我收到的结果是：

expect(string).toContain(value)
Expected string:
  ""
To contain value:
  "some random string"

Answer 1

我不知道

为什么会发生这种情况，但我能够重现您的错误并使用"修复"它

  this.$el.innerHTML = this.content;

而不是

  this.$el.innerText = this.content;

编辑：

我不完全确定这一点，但是默认情况下，vue-test-utils将jest与jsdom一起使用，并且根据此问题，他们尚未实现innerText。