Cypress 10.7x - TypeError: addContext is not a function

[idanElitzur]

Describe the bug Since the latest Cypress version the 'after:run' API configuration is changed and the mochawesome addContext configureation is now part of the cypress config file and not in the support file anymore. So I've tried to refactor the configuration for I can attach the failed tests screenshoots but it yell about

An error was thrown in your plugins file while executing the handler for the after:spec event.

The error we received was:

TypeError: addContext is not a function
...

Code Reproduce

// cypress/cypress.config.ts
/// <reference types="cypress" />
/**
 * @type {Cypress.PluginConfig}
 */

import { defineConfig } from 'cypress';
// @ts-ignore
import * as addContext from './node_modules/mochawesome/src/addContext';
const fs = require('fs');
const ansi = require('ansi-colors');
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const { execSync } = require('child_process');

export default defineConfig({
    env: {
        SMTP_HOST: process.env.SMTP_HOST,
    },
    e2e: {
        supportFile: './../my-shared-cy-infra/cypress/support/e2e.ts',
        downloadsFolder: './../my-shared-cy-infra/cypress/downloads',
        chromeWebSecurity: false,
        experimentalSourceRewriting: false,
        experimentalModifyObstructiveThirdPartyCode: true,
        numTestsKeptInMemory: 1,
        defaultCommandTimeout: 30000,
        requestTimeout: 30000,
        responseTimeout: 30000,
        taskTimeout: 30000,
        pageLoadTimeout: 30000,
        screenshotsFolder: './../my-shared-cy-infra/mochawesome-report/assets',
        screenshotOnRunFailure: true,
        reporter: './../my-shared-cy-infra/node_modules/mochawesome',
        reporterOptions: {
            reportDir: './../my-shared-cy-infra/cypress/report',
            code: false,
            charts: true,
            overwrite: false,
            html: false,
            json: true,
            embeddedScreenshots: true,
        },
        video: false,
        viewportHeight: 1080,
        viewportWidth: 1920,
        waitForAnimations: true,
        setupNodeEvents(on, config) {
            // @ts-ignore
            on('after:spec', (spec: any, results: any) => {
                    const screenshot = `assets/${spec.name}/${results.tests[0].title[0]} -- ${results.tests[0].title[1]} (failed).png`;
                console.log('log', '>>>>>>> ' + screenshot);

                addContext({ spec }, screenshot);
            });

            on('task', {
                log(message) {
                    console.log(ansi.yellow(message));
                    return true;
                },
            });

            on('task', {
                err(message) {
                    console.log(ansi.red(message));
                    return true;
                },
            });
            return config;
        },
    },
});

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• Platform: mac os 12
• mochawesome version: 7.3.1
• cypress version 10.7.0
• Node version 14.19.1

Additional context Add any other context about the problem here.

[idanElitzur]

please your help @adamgruber 🙏

[adamgruber]

I'm not sure this line is correct:

import * as addContext from './node_modules/mochawesome/src/addContext';

Have you tried replacing with this?

const addContext = require('mochawesome/addContext');

[idanElitzur]

Thanks, It's solved the type error but the screenshots are not attached to the report. Even there is no any broken image or 404 responses in the browser console. Do you maybe know what missed in my configuration above?

I guess the root cause is related that I'm using on('after:spec') because Cypress v10x configuration in not support in test:after:run anymore

@adamgruber

[adamgruber]

Sorry I'm not too familiar with the cypress changes since I don't use it.

[idanElitzur]

OK Thanks a lot anyway, Love your reporter! Shana tova 🍎 🍯 @adamgruber

I'll close this one.