文章/答案/技术大牛

发布

社区首页 >问答首页 >具有Jest存根功能的Vue3不具有存根

问具有Jest存根功能的Vue3不具有存根
EN

Stack Overflow用户

提问于 2021-05-28 14:14:30

回答 1查看 521关注 0票数 0

构成部分：

<template>
  <div id="fileviewer" class="min-h-full">
    <section class="gap-4 mt-4">
      <div class="bg-medium-50 w-1/3 p-4">
        <FileUpload ></FileUpload>
      </div>
      <div class="bg-medium-50 w-2/3 p-4">
        <FileViewer></FileViewer>
      </div>
    </section>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
import FileViewer from "@/components/FileViewer";

export default {
  name: "FileManager",
  components: { FileUpload, FileViewer },
};
</script>

测试：

import { mount } from "@vue/test-utils";
import FileManager from '@/views/FileManager';

describe('FileManager.vue', () =>{

  it('should mount', () => {
    const wrapper = mount(FileManager, {
      global: {
        stubs: {
          FileUpload: true,
          FileViewer: true
        }
      }
    })

    expect(wrapper).toBeDefined()
  })

})

不像文档那样对我有用。没有特殊装置。相反，框架希望为子组件执行'import‘语句，然后失败，因为我不想模拟这个组件的“fetch”。有什么想法吗？

"vue-jest": "^5.0.0-alpha.9"
"@vue/test-utils": "^2.0.0-rc.6"
"vue": "^3.0.0",

谢谢你帮忙。

vuejs3

vue-test-utils

unit-testing

jestjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-31 06:27:29

I.如果要自动存根所有子组件，只需使用shallowMount而不是mount。

II.如果您想要这样做，那么无论如何都要使用mount，尝试像这样修复存根：

global: {
  stubs: {
    FileUpload: {
      template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
    },
    FileViewer: {
      template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
    }
  }
}

或者，您可以像我一样在测试之前定义存根。例如：

const FileUploadStub = {
  template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
}

const FileViewerStub: {
  template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
}

然后在mount或shallowMount中使用存根

global: {
  stubs: {
    FileUpload: FileUploadStub,
    FileViewer: FileViewerStub
  }
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67740535

复制

相似问题

问具有Jest存根功能的Vue3不具有存根
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有Jest存根功能的Vue3不具有存根EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有Jest存根功能的Vue3不具有存根
EN