Question

我目前有以下Vue页面代码：

<template>
   // Button that when clicked called submit method
</template>

<script>
import { moveTo } from '@/lib/utils';

export default {
  components: {
  },
  data() {
  },
  methods: {
    async submit() {
      moveTo(this, COMPLETE_ACTION.path, null);
    },
  },
};
</script>

，然后有此页面的测试文件。我的问题是我试图检查并断言使用Jest使用正确的参数调用moveTo方法。它一直显示预期的未定义状态，但接收到一个对象。以下是测试文件中的关键点：

  import * as dependency from '@/lib/utils';
  dependency.moveTo = jest.fn();
  // I then trigger the button call which calls the submit method on the page
  expect(dependency.moveTo).toHaveBeenCalledWith(this, COMPLETE_ACTION.path, null);

我不确定在这种情况下该这是什么以及我实际上应该传递什么。只是要注意，我正在使用vue测试工具中的安装助手。

Answer 1

您需要模拟模块本身。在您的情况下，您将对从未调用的间谍函数进行断言。

您可以通过创建"mocks/ subdirectory immediately adjacent to the module"添加模块模拟。对于节点模块"If the module you are mocking is a Node module (e.g.: lodash), the mock should be placed in the mocks directory adjacent to node_modules"。

在您的情况下（还有其他方法），您需要创建一个与[group:accounting] programs=accounting_web [program:accounting_web] command = /home/web/.virtualenvs/accounting/bin/gunicorn accounting.wsgi --workers=1 --threads=4 -b unix:/tmp/gunicorn_accounting.sock --log-level=DEBUG --timeout=120 directory = /home/web/accounting user = web environment=PATH="/home/web/.virtualenvs/accounting/bin"相邻的__mocks__文件夹，并在node_modules创建一个文件并导出模拟函数：

__mocks__/lib/utils/index.js

Answer 2

我解决了我的问题，这是测试中的 this 参数。该在测试中未定义，并希望与VueComponent匹配。

我使用了包装器，然后根据文档https://vue-test-utils.vuejs.org/api/wrapper/#properties

引用了vm属性来访问VueComponent。

依次我更新了以下行并添加了 wrapper.vm

  expect(dependency.moveTo).toHaveBeenCalledWith(wrapper.vm, COMPLETE_ACTION.path, null);

我怎样才能用玩笑模拟一个外部类？

2 个答案: