el-checkbox 不能用 jest 设置检查或至少在 v-model 上没有变化

Posted 2023-02-22

【中文标题】el-checkbox 不能用 jest 设置检查或至少在 v-model 上没有变化

【英文标题】：el-checkbox cannot be set checked with jest or at least no change on v-model

【发布时间】：2019-08-24 23:45:41

【问题描述】：

我正在为我的 vuejs 网站设置一些测试。我正在使用element-ui。我正在我的连接页面上开玩笑。我有一个链接到“记住我”的复选框。我会检查它并检查 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)，仍然没有。所以，我将“点击”更改为“更改”，但仍然无法正常工作......

 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

但没有任何改变。

【参考方案1】：

好的，我只需要添加

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

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

【参考方案2】：

是的

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

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