Code coverage plugin in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Understanding code coverage report output

Given the following Cypress test and code coverage setup, what will be the coverage percentage reported for the function add after running the test?

Cypress

function add(a, b) {
  if (a === 0) {
    return b;
  }
  return a + b;
}

describe('add function', () => {
  it('returns b when a is zero', () => {
    expect(add(0, 5)).to.equal(5);
  });
});

A 50%

B 100%

C 0%

D 75%

💡 Hint

Think about which lines of the function are executed by the test.

The test only covers the if (a === 0) branch and returns b. The return a + b line is never executed, so only half of the function's lines are covered, resulting in 50% coverage.

❓ assertion

intermediate

Correct assertion for coverage threshold

Which assertion correctly checks that the global coverage object reports at least 80% statement coverage in Cypress tests?

Cypress

/* Assume global coverage object is available as window.__coverage__ */

A assert(window.__coverage__.statements >= 80);

B expect(window.__coverage__.statements.percent).to.be.above(80);

C expect(window.__coverage__.statements.pct).to.be.gte(80);

D expect(window.__coverage__.statements.pct).to.equal(80);

💡 Hint

Check the property name for statement coverage percentage in the coverage object.

The coverage object uses statements.pct to represent statement coverage percentage. Option C uses the correct property and assertion method to check if coverage is greater than or equal to 80.

🔧 Debug

advanced

Debugging missing coverage data

You configured Cypress with the code coverage plugin, but after running tests, the coverage report is empty. Which of the following is the most likely cause?

A The test files are missing the <code>describe</code> blocks.

B The <code>cy.visit()</code> command is missing in tests.

C The coverage report folder path is incorrect in <code>cypress.json</code>.

D The instrumented code is not loaded during tests.

💡 Hint

Think about what code coverage measures and what must happen for it to collect data.

Code coverage requires instrumented code to be loaded during tests. If the instrumented code is not loaded, coverage data will be empty. Missing describe blocks or cy.visit() may cause tests to fail but do not directly cause empty coverage. Incorrect folder path affects report saving but not data collection.

❓ framework

advanced

Configuring Cypress code coverage plugin

Which configuration snippet correctly sets up the Cypress code coverage plugin to collect coverage and generate reports after tests?

A

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-plugin-code-coverage')(on, config);
      return config;
    }
  }
};

B

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config);
      return config;
    }
  }
};

C

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('before:run', () => console.log('Starting tests'));
      return config;
    }
  }
};

D

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage')(on, config);
      return config;
    }
  }
};

💡 Hint

Check the exact package name and method to register the coverage task.

The official Cypress code coverage plugin requires importing @cypress/code-coverage/task in setupNodeEvents. Option B correctly does this. Option B uses a wrong package name. Option B misses /task suffix. Option B does not register coverage.

🧠 Conceptual

expert

Impact of source maps on coverage accuracy

Why are source maps important when using the Cypress code coverage plugin with transpiled code (e.g., TypeScript or Babel)?

A They map the transpiled code back to original source lines, ensuring accurate coverage reporting.

B They speed up test execution by caching coverage data.

C They automatically fix syntax errors in the transpiled code.

D They enable Cypress to run tests in multiple browsers simultaneously.

💡 Hint

Think about how coverage tools relate executed code to original source code.

Source maps connect the transpiled code to the original source code lines. This allows the coverage plugin to report coverage accurately on the original files, not the transformed code. They do not affect speed, fix syntax errors, or enable parallel browser runs.