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

Question

组件：

<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()
  })

})

根据 docs 对我不起作用。无需特殊安装。相反，框架想要为子组件执行 'import' 语句然后失败，因为我不想为这个组件模拟 'fetch'。有什么想法吗？

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

感谢您的帮助。

Answer 1

我。如果你想自动存根所有子组件你可以使用 shallowMount 而不是 mount.

二。如果你想这样使用 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
  }
}

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

Vue3 with Jest stub functionality does not stub

unit-testing

jestjs

vuejs3

vue-test-utils