unit-testing - 为什么在使用 Jest 运行测试时，Trix 编辑器不会挂载到 Vue 组件中？

Question

我构建了一个简单的 Vue 组件来包装 Trix 编辑器。我正在尝试为它编写测试，但 Trix 似乎没有正确安装，也没有像在浏览器中那样生成工具栏元素。我正在使用 Jest 测试运行器。

TrixEdit.vue

<template>
  <div ref="trix">
    <trix-editor></trix-editor>
  </div>
</template>

<script>
import 'trix'

export default {
  mounted() {
    let el = this.$refs.trix.getElementsByTagName('trix-editor')[0]
    // HACK: change the URL field in the link dialog to allow non-urls
    let toolbar = this.$refs.trix.getElementsByTagName('trix-toolbar')[0]
    toolbar.querySelector('[type=url]').type = 'text'

    // insert content
    el.editor.insertHTML(this.value)

    el.addEventListener('trix-change', e => {
      this.$emit('input', e.target.innerHTML)
    })
  }
}
</script>

TrixEdit.spec.js

import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
import TrixEdit from '@/components/TrixEdit.vue'

const localVue = createLocalVue()
localVue.config.ignoredElements = ['trix-editor']

describe('TrixEdit', () => {
  describe('value prop', () => {
    it('renders text when value is set', () => {
      const wrapper = mount(TrixEdit, {
        localVue,
        propsData: {
          value: 'This is a test'
        }
      })

      expect(wrapper.emitted().input).toEqual('This is a test')
    })
  })
})

expect() 失败并出现以下错误

    Expected value to equal:
      "This is a test"
    Received:
      undefined

    at Object.toEqual (tests/unit/TrixEdit.spec.js:19:39)

为什么 Trix 在我的测试中没有初始化？

Answer 1

trix-editor没有安装主要是因为MutationObserver JSDOM 11 不支持， attachToDocument 没有用过。在下面描述的测试中还有其他几个错误。

GitHub demo w/issues fixed

---

缺少MutationObserver和 window.getSelection

Vue CLI 3.7.0 使用 JSDOM 11，不支持 MutationObserver ，自定义元素 polyfill 需要触发 connectedCallback .该生命周期 Hook 通常会调用 trix-editor的初始化，这将创建 trix-toolbar您的测试试图查询的元素。

解决方案 1: 在您的测试中，导入 mutationobserver-shim 之前 TrixEdit.vue , 和 stub window.getSelection (由 trix 调用，目前 JSDOM 不支持):

import 'mutationobserver-shim' // <-- order important
import TrixEdit from '@/components/TrixEdit.vue'

window.getSelection = () => ({})

解决方案 2:在 Jest 设置脚本中执行上述操作，由 setupTestFrameworkScriptFile 配置:

1. 将以下属性添加到 jest.config.js 中的配置对象中(或 package.json 中的 jest):

setupTestFrameworkScriptFile: '<rootDir>/jest-setup.js',

1. 将以下代码添加到<rootDir>/jest-setup.js :

import 'mutationobserver-shim'
window.getSelection = () => ({})

缺少attachToDocument

@vue/test-utils默认情况下不会将元素附加到文档，所以 trix-editor没有 catch connectedCallback ，这是其初始化所必需的。

解决方案:使用 attachToDocument option安装时TrixEdit :

const wrapper = mount(TrixEdit, {
  //...
  attachToDocument: true, // <-- needed for trix-editor
})

过早引用 trix-editor的编辑

TrixEdit错误地假设 trix-editor在挂载时立即初始化，但在触发 trix-initialize 之前不能保证初始化事件，所以访问 trix-editor的内部编辑器可能导致 undefined引用。

解决方案:添加一个event handler对于 trix-initialize调用先前在 mounted() 中的初始化代码的事件:

<template>
  <trix-editor @trix-initialize="onInit" />
</template>

<script>
export default {
  methods: {
    onInit(e) {
      /* initialization code */
    }
  }
}
</script>

更改监听器之前设置的值

初始化代码添加了一个trix-change - 事件监听器 after 值已经设置，缺少事件触发器。我假设其目的还在于检测第一个初始值设置，以便将其作为 input 重新发出。事件。

方案一:先添加事件监听器:

<script>
export default {
  methods: {
    onInit(e) {
      //...
      el.addEventListener('trix-change', /*...*/)

      /* set editor value */
    }
  }
}
</script>

解决方案 2:使用 v-on:trix-change="..." (或 @trix-change )在模板中，这将消除上面的设置顺序问题:

<template>
  <trix-editor @trix-change="onChange" />
</template>

<script>
export default {
  methods: {
    onChange(e) {
      this.$emit('input', e.target.innerHTML)
    },
    onInit(e) {
      //...
      /* set editor value */
    }
  }
}
</script>

值设置导致错误

初始化代码设置editor的值，代码如下，导致测试出错:

el.editor.insertHTML(this.value) // causes `document.createRange is not a function`

解决方案:使用trix-editor的 value -accessor，执行等效操作同时避免此错误:

el.value = this.value