如何在 vue 测试中模拟第 3 方 window 对象？

Question

所以我有一个 vue 方法需要测试

在CheckoutButton.vue

createMidtransToken () {
  const card = this.$store.state.payment.creditCardPayload
  const options = {
        onSuccess: (response) => {
          // HANDLING SUCCESS
          const payload = {
            ...this.paymentTypeChoosen,
            token: response.token_id
          }
          this.payCheckout(payload)
        },
        onFailure: (response) => {
          // HANDLING ERROR
          const errorMessage = response.status_message
          this.$alertModal.show({
            show: true,
            type: 'error',
            title: 'Transaksi Dibatalkan',
            text: errorMessage,
            showButton: true,
            buttonText: 'Kembali',
            buttonEventExist: true,
            buttonEvent: () => {
              this.handleRouteError()
            }
          })
        }
      }
  window.MidtransNew3ds.getCardToken(card, options)
}

在CheckoutButton.spec.js

it('Should test createMidtransToken', () => {
    Object.defineProperty(window, 'MidtransNew3ds', {
      getCardToken: jest.fn()
    })

    wrapper.vm.createMidtransToken()
    expect(window.MidtransNew3ds.getCardToken).toHaveBeenCalled()
  })
})

然后出现错误

● 使用阶段摘要测试组件 CheckoutButton › 应测试 createMidtransToken

TypeError: Cannot read property 'getCardToken' of undefined
  362 |         }
  363 |       }
> 364 |       window.MidtransNew3ds.getCardToken(card, options)
      | ^
  365 |     },

如何测试 createMidtransToken 方法以便文件测试可以运行正确？

Answer 1

defineProperty 参数不正确。为了定义属性.

，配置对象中应该有 get 函数或 value 值

Object.defineProperty(window, 'MidtransNew3ds', {
   value: { getCardToken: jest.fn() }
})

没有理由在这里使用它，因为 defineProperty 仅用于特定目的。它可以在每个测试中定义，也可以在 beforeEach 中为所有测试定义：

window.MidtransNew3ds = { getCardToken: jest.fn() };

并应始终在 afterEach 中清理，以免影响其他测试：

delete window.MidtransNew3ds

如何在 vue 测试中模拟第 3 方 window 对象？

How to mock a 3rd party window object in vue test?

javascript

vue.js

jestjs