Cannot view complete html and inline events in jest testing with vue-test utils in wrapper.html()

Question

I just started to include unit tests to vue3 application using Jest and Vue-test utils. Installed all the latest compatible versions as below and my jest config is also below. why cant we access complete html in wrapper and other variable and bindings in vue template. Tried to check if there are any version mismatches bit looks like the current versions are correct. Did anyone encounter this kind of issues ?Appreciate any advice and i am out of all the options.

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>

Answer 1

Expose your variables

This has nothing to do with JEST itself - but with the bindings that are declared in itself. As they are hidden by default, you ahve to expose any of them to the component instance with defineExpose():

It'S the same like using a component ref and accessing it's instance-member. You can only access those, which are exposed.

e.g. expose with defineExpose

<script setup>
const testMethod = function(input) {
  return input + 1;
};

defineExpose({
  testMethod
})
</script>

Then you could access wrapper.vm.testMethod