Jest unable to cover the code optional chaining with ternary operator

[pankajd1990]

I have written the following code in my vue3 project. when i checking jest code coverage then optional chaining with ternary operator showing branch is not covered . I have written all unit test case .

below is my code

<script lang="ts">
import ProcessService from "./service";
import { useStore } from "vuex";

export default {
 data() {
   return {
     message: "Hello World!",
   };
 },
 methods: {
   getName1(e) {
     var status1 = [];
     const _target = e?.target;
     if (_target?.value === "all") {
       console.log("all", _target);
       status1 = _target?.checked ? ["0", "1", "2", "3", "4", "5", "all"] : []; // set all values in the array
     }
   },
 },
};
</script>
<template>
 <h1>pankaj</h1>
</template>

my Unit test case

import HelloWorld from "../../components/HelloWorld.vue";
import {
  shallowMount,
} from "@vue/test-utils";

let wrapper = "";

describe("HelloWorld.vue", () => {
  wrapper = shallowMount(HelloWorld);

  test("getName1 with null parameter", async () => {   
    wrapper.getComponent(HelloWorld).vm.getName1(null);
  });

  it("should handle edge cases when target is undefined", () => {
    const mockEvent = {};
    const result = wrapper.getComponent(HelloWorld).vm.getName1(mockEvent); 
  });

  it("should include all statuses when target value is all and checked is true", () => {
    const mockEvent = { target: { value: "all", checked: true } };
    const result = wrapper.getComponent(HelloWorld).vm.getName1(mockEvent);    
  });

  it("should add checked is undefine", () => {
    const mockEvent = { target: { value: "all" } };
    let result = wrapper.getComponent(HelloWorld).vm.getName1(mockEvent);
    result = wrapper.getComponent(HelloWorld).vm.getName1(mockEvent);
  });
});

jest config file

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  transform: {
    "^.+.js$": "babel-jest",
    ".*.(vue)$": "@vue/vue3-jest",
    "^.+\\.ts$": "ts-jest",
  },
  moduleNameMapper: {
    "^axios$": "axios/dist/node/axios.cjs",
    "\\.(css|less)$": "<rootDir>test.js",
  },
  transformIgnorePatterns: ["/node_modules/(?!@vueform/multiselect)"],

  testEnvironment: "jsdom",
  testMatch: ["**/src/**/*.spec.{j,t}s?(x)"],
  testTimeout: 30000,
  verbose: true,
  collectCoverage: true,
  coverageProvider: "v8",
  collectCoverageFrom: [
    "src/**/*.{js,vue,ts}",
    "!src/main.js", // No need to cover bootstrap file
  ],
  globals: {
    "ts-jest": {
      babelConfig: "babel.config.js",
    },
  },
};

tsconfig file

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env","jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [   
  ],
  "exclude": ["node_modules"]
}

code coverage report

In above image .checked saying branch is not cover

[Shyam-Chen]

If your Vue 3 project uses Vite, you can directly replace Jest with Vitest.

[slear08]

Just update the tsconfig, from target: "ES6" to "ES2020" or latest