正文 

当前位置： 首页 > 知识 >

如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin？

     2023-02-22     194

关键词：

【中文标题】如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin？【英文标题】：How to mock mixin during unit test using vue-test-utils and jest? 【发布时间】：2019-08-07 19:55:35 【问题描述】：

我想在 Test.vue 中测试 testMethod，但是 testMethod 使用了从 App.js 导入的 mixin。

Test.vue

<script>
    export default 
        methods: 
            testMethod() 
                return 'get'+this.getTestMixin();
            
        ,
    ;
</script>

mixins/common.js

export default 
    methods: 
        getTestMixin() 
            return 'test';
        ,
    ,
;

如何模拟 mixin？我试图像下面那样模拟 mixin 但失败了，知道我在哪里做错了吗？

function getTestMixin() 
    return 'test';


const localVue = createLocalVue()
localVue.mixin(getTestMixin)

const wrapper = shallowMount(Test, 
    localVue,
)

错误信息如下：

TypeError: Cannot read property 'props' of undefined
  46 | beforeEach(() => 
> 47 |  wrapper = shallowMount(Test, 
     |          ^
  48 |      localVue,
  49 |  );
  50 | );

【问题讨论】：

【参考方案1】：

如果在浅挂载之前替换 Mixin，则可以模拟它们。比如：

const localVue = createLocalVue();

const mockMixin = 
  methods: 
    mixinMethod() 
        return 'test';
    ,
  


const MockedTestComponent =  ...TestComponent, mixins: [mockMixin] ;

const wrapper = shallowMount(MockedTestComponent, 
  localVue,
);

expect(wrapper.vm.mixinMethod()).toEqual('test');

【讨论】：

【参考方案2】：

使用 Vue 3 并使用 Vue Test Utils，这只是使用 Jest 模拟单个方法的问题。

    const wrapper = mount(Test, 
        global: 
            mixins: [common],
        ,
     as any)

    jest.spyOn(wrapper.vm, 'getTestMixin').mockImplementation()

所以 testMethod() 的返回值将只是 'get'。

请注意，Jest 模拟它而不关心该方法在 mixin 上，而不是在 Vue 组件上。

【讨论】：

如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin？

】如何在单元测试期间使用vue-test-utils和jest模拟mixin？【英文标题】：Howtomockmixinduringunittestusingvue-test-utilsandjest?【发布时间】：2019-08-0719:55:35【问题描述】：我想在Test.vue中测试testMethod，但是testMethod使用了从App.js导入的mixin。Tes... 查看详情

如何使用 vue-test-utils 和 Jest 在 Nuxt 中对使用 vuex-module-decorators 语法定义的 Vuex 模块进行单元测试？

】如何使用vue-test-utils和Jest在Nuxt中对使用vuex-module-decorators语法定义的Vuex模块进行单元测试？【英文标题】：HowtounittestVuexmodulesdefinedwithvuex-module-decoratorssyntaxinNuxt,usingvue-test-utilsandJest?【发布时间】：2021-11-1717:50:54【问题描述】... 查看详情

vue-test-utils：如何在 mount() 生命周期钩子（使用 vuex）中测试逻辑？

】vue-test-utils：如何在mount()生命周期钩子（使用vuex）中测试逻辑？【英文标题】：vue-test-utils:Howtotestlogicwithinmounted()lifecyclehook(withvuex)?【发布时间】：2018-10-2101:36:59【问题描述】：我正在尝试为Vue的mounted()生命周期钩子中的逻辑... 查看详情

使用 ReSharper，如何在长时间运行的单元测试期间显示调试输出？

】使用ReSharper，如何在长时间运行的单元测试期间显示调试输出？【英文标题】：UsingReSharper,howtoshowdebugoutputduringalong-runningunittest?【发布时间】：2013-02-1202:24:02【问题描述】：我将xUnit与ReSharper测试运行程序和xUnitContribresharper插... 查看详情

如何在单元测试期间测试所需的 argparse 参数？

】如何在单元测试期间测试所需的argparse参数？【英文标题】：Howtotestrequiredargparseargumentsduringunittests?【发布时间】：2019-11-1523:16:08【问题描述】：我正在为argparser做TDD测试。如何使用required选项测试参数？我需要测试所有选项，... 查看详情

如何在 Laravel 单元测试期间获取视图数据

】如何在Laravel单元测试期间获取视图数据【英文标题】：HowtogetviewdataduringunittestinginLaravel【发布时间】：2014-02-0400:24:00【问题描述】：我想检查控制器函数中赋予视图的数组是否具有某些键值对。如何使用phpunit测试来做到这一... 查看详情

VueJs 如何删除全局错误处理程序以使用 vue-test-utils 进行测试

】VueJs如何删除全局错误处理程序以使用vue-test-utils进行测试【英文标题】：VueJshowtoremoveglobalerrorhandlerfortestingwithvue-test-utils【发布时间】：2020-10-1909:03:56【问题描述】：我正在vue中为画布运行单元测试（测试通过）。但是我收到... 查看详情

Python：如何在单元（鼻子）测试期间忽略装饰器？

】Python：如何在单元（鼻子）测试期间忽略装饰器？【英文标题】：Python:Howtoignoredecoratorsduringunit(nose)tests?【发布时间】：2018-06-0523:26:51【问题描述】：我想忽略我的代码中的某些装饰器以跳过相关的功能，但仅在作为单元测试... 查看详情

如何在单元测试期间通过 Thymeleaf 模板的身份验证

】如何在单元测试期间通过Thymeleaf模板的身份验证【英文标题】：HowtopassAuthenticationforThymeleasftemplateduringunittest【发布时间】：2019-08-1707:39:20【问题描述】：我正在使用SpringBoot2.0.8.RELEASE。我有一个控制器，它具有以下方法构造@Po... 查看详情

如何在单元测试期间覆盖 IQueryable 的 Contains 方法？

】如何在单元测试期间覆盖IQueryable的Contains方法？【英文标题】：HowdoIoverridetheContainsmethodofIQueryableduringaunittest?【发布时间】：2011-02-1704:33:40【问题描述】：事情是这样的：我正在测试一个使用LINQtoEntities(EF4/.NET4)的应用程序。该... 查看详情

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试？

...Vue2.0组件，它使用来自Vuetify的Menu组件。我正在使用官方vue-test-utils在测试期间挂载我的组件。我面临的问题是菜单组件将“菜单”附加到HTML正文（ 查看详情

如何在单元测试期间访问 .war 类路径中的文件？

】如何在单元测试期间访问.war类路径中的文件？【英文标题】：Howtoaccessafileinthe.warclasspathduringunittests?【发布时间】：2013-03-2803:56:52【问题描述】：我有一个Web应用程序项目，我正在尝试对使用FreeMarker模板创建文件的方法进行... 查看详情

如何在单元测试期间注入 PersistenceContext？

】如何在单元测试期间注入PersistenceContext？【英文标题】：HowtoinjectPersistenceContextduringunittesting?【发布时间】：2010-09-2720:35:48【问题描述】：这是我的java类：publicclassFinder@PersistenceContext(unitName="abc")EntityManagerem;publicbooleanexists(inti) 查看详情

如何在单元测试期间捕获 Celery 任务？

】如何在单元测试期间捕获Celery任务？【英文标题】：HowdoIcaptureCelerytasksduringunittesting?【发布时间】：2014-04-1409:17:22【问题描述】：如何在不运行单元测试期间创建的Celery任务的情况下进行捕获？例如，我想编写一个如下所示的... 查看详情

如何在 Mockito 单元测试期间生成 H2 嵌入式数据库？

】如何在Mockito单元测试期间生成H2嵌入式数据库？【英文标题】：HowtogenerateH2embeddeddatabaseduringMockitounittest?【发布时间】：2019-10-1022:22:01【问题描述】：我目前正在开发一个springbootAPI，已决定我和我的同事将在开发过程中使用H2... 查看详情

使用 XCTest 在单元测试期间接收通知？

】使用XCTest在单元测试期间接收通知？【英文标题】：ReceivenotificationsduringunittestswithXCTest?【发布时间】：2015-01-2816:07:42【问题描述】：在旧的SenTestingKit中，我们曾经在测试运行时收到一些非常有用的通知：SenTestSuiteDidStartNotifica... 查看详情

在使用 CMake 构建 Windows DLL 期间运行单元测试

】在使用CMake构建WindowsDLL期间运行单元测试【英文标题】：RunningunittestsduringbuildofWindowsDLLwithCMake【发布时间】：2013-09-1321:25:08【问题描述】：我有一个用cmake构建的C++库。该库通过单元测试进行测试，我希望将其作为构建的一部... 查看详情

带有 vue-test-utils 和 Jest 的 Vue.js 单元测试用例失败

】带有vue-test-utils和Jest的Vue.js单元测试用例失败【英文标题】：Vue.jsunittestcaseswithvue-test-utilsandJestfailing【发布时间】：2019-01-2719:48:57【问题描述】：使用vue-cli3，我开始学习用Jest进行单元测试我为我的初始标题组件编写了我的第... 查看详情