我刚开始使用Jest和Vue-test utils将单元测试包含到vue 3应用程序中。安装了所有最新的兼容版本，如下所示，我的jest配置也在下面。为什么我们不能在 Package 器中访问完整的html以及其他变量和vue模板中的绑定。试图检查是否有任何版本不匹配，看起来当前版本是正确的。有人遇到这种问题吗？感谢任何建议，我没有任何选择。

package.json
"devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.4.1",
    "@vue/vue3-jest": "^29.2.6",
    "axios-mock-adapter": "^1.22.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^27.6.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "29.7",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transform-stub": "^2.0.0"
  },
"jest": {
    "rootDir": "./",
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "modulePaths": [
      "<rootDir>",
      "src"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    },
    "transform": {
      ".*\\.(vue)$": "@vue/vue3-jest",
      ".*\\.(js)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.html?$": "html-loader-jest"
    },
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "customExportConditions": [
        "node",
        "node-addons"
      ]
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!src/main.js",
      "!**/node_modules/**"
    ],
    "transformIgnorePatterns": [
      "node_modules/"
    ]
  }

For example component.vue
<template>
    <div class="d-none d-sm-block col text-end">
            <button
              v-if="editModeFlights"
              class="btn-cancel btn"
              @click="cancelEditFlights"
            >
              Cancel
            </button>
            <button
              :class="editModeFlights ? 'btn-save btn' : 'btn-edit btn'" id="flightEditButton"
              @click="toggleEdit"
            >
              {{ editModeFlight ? "Save" : "Edit" }}
            </button>
          </div>
          <div v-if=showDialog>
           ...
          </div>
  </template>  
  <script>
    export default {
      name: "App",
      components: {
        
      },
      setup() {
     const showDialog = ref(false);
    
    return{ 
    showDialog
    }
    }}
 </script>

 ------------------------------------
 component.spec.vue

 import { mount } from '@vue/test-utils';
 import Component from './Component.vue';
 
   
  it('renders correctly', () => {
  const wrapper = mount(Component);
  wrapper.vm.$nextTick();
  expect(wrapper.exists()).toBe(true);
  console.log(wrapper.vm.showDialog.value) //gives me undefined cannot access wrapper variable
  console.log(wrapper.html()) //
    
   });

for example  console.log(wrapper.html()) gives below by default without @click event functions
      <!--v-if--><button class="btn-edit btn" id="flightEditButton">Edit</button>

字符串