el-checkbox 不能设置为 checked with jest 或者至少在 v-model 上没有变化

Question

我正在为我的 vuejs 网站设置一些测试。我正在使用 element-ui。我正在我的连接页面上开玩笑。我有一个链接到 "remember me" 的复选框。我会检查它并检查 v-model 的值是否更改。

不幸的是，它没有。

在我的连接文件中，我有复选框：

...
  <el-checkbox v-model="connectionForm.rememberme"></el-checkbox>
...

和 rememberme 变量：

...
  data() {
    return {
      connectionForm: {
        ...
        rememberme: false
      },
...

我的测试文件：


describe('Connection', () => {
  const wrapper = mount(Connection)

  it('checkbox click', () => {
    expect(wrapper.vm.connectionForm.rememberme).toBe(false)

    expect(wrapper.contains('el-checkbox')).toBe(true)
    const elCheckbox = wrapper.find('el-checkbox')

    elCheckbox.setChecked(true)
    expect(wrapper.vm.connectionForm.rememberme).toBe(true)
  })
})

 FAIL  frontend/components/user/sessions/New.test.js
  Connexion
    ✓ has a el-button (4ms)
    ✕ checkbox click (10ms)

  ● Connexion › checkbox click

    [vue-test-utils]: wrapper.setChecked() cannot be called on this element

      26 | 
    > 27 |     elCheckbox.setChecked(true)
         |                ^
      28 |     expect(wrapper.vm.connexionForm.rememberme).toBe(true)
      29 |   })
      30 | })

doc checkbox

因此，我用 .trigger('click') 更改了 setChecked(true)，但仍然没有。所以，我将 'click' 更改为 'change'，但仍然无法正常工作...

 FAIL  frontend/components/user/sessions/New.test.js
  Connexion
    ✓ has a el-button (4ms)
    ✕ checkbox click (10ms)
  ● Connexion › checkbox click

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      27 |     elCheckbox.trigger('change')
    > 28 |     expect(wrapper.vm.connectionForm.rememberme).toBe(true)
         |                                                  ^
      29 |   })
      30 | })
      31 |

如果在某处找到这个：

    elCheckbox.element.selected = true

但没有任何改变。

Answer 1

好的，我只需要添加

import ElementUI from 'element-ui'
Vue.use(ElementUI)

然后，我在测试中将所有 "el-button" 更改为 "button"，"el-checkbox" 更改为 "input" 等（最好使用 ID）

Answer 2

是

wrapper.find('.el-checkbox input[type="checkbox"]').setChecked(true)

会工作，因为 el-checkbox 本身将复选框输入包装在其中（作为其子项之一），并且此 api 似乎适用于复选框输入元素。参考：https://vue-test-utils.vuejs.org/api/wrapper/#setchecked.

el-checkbox 不能设置为 checked with jest 或者至少在 v-model 上没有变化

el-checkbox cannot be set checked with jest or at least no change on v-model

checkbox

vue.js

jestjs

element-ui