• Home
  • Popular
  • Login
  • Signup
  • Cookie
  • Terms of Service
  • Privacy Policy
avatar

Posted by Mark DS


08 Jan, 2025

Updated at 20 Jan, 2025

Jest unable to cover the code optional chaining with ternary operator

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

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 } }, }, }; ">

my Unit test case

{ 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); }); }); ">
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

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", }, }, }; ">
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)$": "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

image

In above image .checked saying branch is not cover