使用 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。该生命周期挂钩通常会调用 trix-editor 的初始化，这将创建您的测试尝试查询的 trix-toolbar 元素。

解决方案 1： 在您的测试中，导入 mutationobserver-shim before TrixEdit.vue 和存根 window.getSelection（由 trix 调用，目前 JSDOM 不支持):

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

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

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

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 不会捕获其初始化所需的connectedCallback。

解决方法：安装TrixEdit时使用attachToDocument option：

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

过早引用trix-editor的编辑器

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

解决方案：为调用之前在mounted()中的初始化代码的trix-initialize事件添加event handler：

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

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

更改侦听器之前设置的值

初始化代码添加了一个trix-change-event 监听器在值已经设置之后，缺少事件触发器。我假设其目的还在于检测第一个初始值设置，以便将其作为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>

值设置导致错误

初始化代码用如下代码设置编辑器的值，导致测试出错：

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

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

el.value = this.value

Answer 2

我可以确认问题在于 trix lib 中包含的不太理想的聚合物填充物。我做了一个实验来强制应用 polyfill，然后我可以在 chrome 浏览器环境中重现相同的错误TypeError: Cannot read property 'querySelector' of undefined。

进一步调查将范围缩小到 MutationObserver 行为差异，但仍未深入调查。

复制方式：

TrixEdit.vue

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

<script>

// force apply polymer polyfill
delete window.customElements;
document.registerElement = undefined;

import "trix";

//...

</script>