Vue.js 和 Jest - Element-UI 如何以编程方式确认 MessageBox?

Posted

技术标签:

【中文标题】Vue.js 和 Jest - Element-UI 如何以编程方式确认 MessageBox?【英文标题】:Vue.js and Jest - Element-UI how to programmatically confirm MessageBox? 【发布时间】:2020-07-06 17:46:39 【问题描述】:

我目前正在使用 Jest 创建测试,我想知道如何以编程方式确认 ElementUI 的 MessageBox,因为我似乎无法获得它的 html DOM。这样它就会在then() 中执行我的graphql 查询。我真的不知道这是否是一个好习惯,因为我是 Jest 的新手。

confirmBox(
        this,
        'warning',
        'Delete Record',
        'Do you really want to delete this record?',
        true
      ).then(() => 
        this.loading = true

        deleteGame(id, (response, success) => 
          if (success) 
            this.$message(
              message: 'Record successfully deleted',
              type: 'success'
            )
            this.get()
           else 
            this.$message(
              message: response,
              dangerouslyUseHTMLString: true,
              type: 'error'
            )
            this.loading = false
          
        )
      )

【问题讨论】:

【参考方案1】:

Element-ui 对所有组件都有单元测试,但是它们是用 karma 编写的。

他们似乎触发了确定按钮如下:

it('confirm', done => 
    MessageBox.confirm('This is a piece of content', 
      title: 'Title name',
      type: 'warning'
    );
    setTimeout(() => 
      document.querySelector('.el-message-box__wrapper')
        .querySelector('.el-button--primary').click();
      expect(document.querySelector('.el-message-box__wrapper')
        .__vue__.$parent.visible).to.false;
      done();
    , 200);
  );

完整来源:https://github.com/ElemeFE/element/blob/dev/test/unit/specs/message-box.spec.js

【讨论】:

以上是关于Vue.js 和 Jest - Element-UI 如何以编程方式确认 MessageBox?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vue.js 学习 JEST:第一个示例测试时出错

Vue.js 和 Jest - Element-UI 如何以编程方式确认 MessageBox?

使用 vue.js 提高 JEST 测试性能

无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块

Jest - 测试在反应变量中声明的 Vue.js 函数

使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”