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
pankaj
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)$": "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