cypress-plugin-snapshots: Error when running all snapshots

So the workaround I can offer for now is to fix Cypress.spec object by looking at the __filename in each spec file. Here is the code to place into cypress/support/index.js. It is a utility function that forms Cypress.spec from passed filename

// cypress/support/index.js
export const fixCypressSpec = filename => () => {
  const path = require('path')
  const relative = filename.substr(1) // removes leading "/"
  const projectRoot = Cypress.config('projectRoot')
  const absolute = path.join(projectRoot, relative)
  Cypress.spec = {
    absolute,
    name: path.basename(filename),
    relative
  }
}

From each spec file (that wants to use snapshots)

import { fixCypressSpec } from '../support'

beforeEach(fixCypressSpec(__filename))

I have been playing with this in https://github.com/bahmutov/objection-example using this approach to run all specs with snapshots

This solution works for me universally with TypeScript:

support/snapshotPatch.ts:

import { basename } from 'path';

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface Chainable<Subject> {
      /**
       * Patch cypress-plugin-snapshots
       *
       * @returns {void}
       */
      fixCypressSpec(): void;
    }
  }
}

Cypress.Commands.add('fixCypressSpec', function () {
  const { absoluteFile, relativeFile } = this.test.invocationDetails;
  Cypress.spec = {
    ...Cypress.spec,
    absolute: absoluteFile,
    name: basename(absoluteFile),
    relative: relativeFile,
  };
});

support/index.ts:

import './support/snapshotPatch.ts';

beforeEach(() => {
  cy.fixCypressSpec();
});

IMO this issue should be mentioned on the README as it’s a huge blocker for me, I only found out after implementing and writing tests (using .only while writing tests) to find the error in the GUI test runner after I ran all my tests which made all my work previously useless.

Please consider adding an eye-catching warning or ‘caveat’ section which mentions this issue so that other users of this package will not share the same experience I had or at the very least, know of this important bug.

Hope Cypress gets the fix in soon, :fingers

(added a PR as a suggestion for a new section in the README file: https://github.com/meinaart/cypress-plugin-snapshots/pull/37)

Especially for Typescript users, it’s easier to use a custom command for the workaround like this:

Cypress.Commands.add('fixCypressSpec', (filename) => {
    const path = require('path')
    const relative = filename.substr(1) // removes leading "/"
    const projectRoot = Cypress.config('projectRoot')
    const absolute = path.join(projectRoot, relative)
    Cypress.spec = {
        absolute,
        name: path.basename(filename),
        relative
    }
})

add it to the index.d.ts like this:

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    fixCypressSpec(filename: string): void
  }
}

and then in the spec in a beforeEach:

describe('my test', () => {
  beforeEach(() => {
    cy.fixCypressSpec('/cypress/integration/mytest_spec.ts')
(...)

Seems not to be working if you are using TypeScript.

The maintenance of this package is freezed… I was added to the project but I didn’t have any right for merge PR or update project settings (CICD is broken)…

When I apply @bahmutov’s workaround - it works well, thanks for this 😄 however, after running the all the test specs, a folder called “ypress” gets created (ie. ypress/integration/__snapshots__/myTestSpecName.spec.js.snap). I was wondering if this is correct or is a side effect of the workaround, as it has not been mentioned here.

I experienced the same thing, to not have “ypress” folder, you juste have to remove substr(1) 😉

There is no reason to manually specify the path: cy.fixCypressSpec(__filename);

I will remove the fix, it was causing other issues and the real reason is a bug in Cypress: https://github.com/cypress-io/cypress/issues/3090

Could this plugin run the fix (workaround) internally?

Thanks @dploeger and @441N143G, that’s really helpful.

Btw, TypeScript users will also want to install @types/node and add it to their tsconfig in order for __filename to work:

{
    ...,
    "types": ["cypress", ..., "@types/node"],
}

Also, @krisraven, I have had the same. I believe the issue here is that you may have provided cypress/integration/mytest_spec.ts instead of /cypress/integration/mytest_spec.ts (no leading slash). This is also the case when using __filename. With this argument, the one line in the workaround which truncates the first character is not required anymore:

  const relative = filename.substr(1); // removes leading "/"

When I apply @bahmutov’s workaround - it works well, thanks for this 😄 however, after running the all the test specs, a folder called “ypress” gets created (ie. ypress/integration/__snapshots__/myTestSpecName.spec.js.snap). I was wondering if this is correct or is a side effect of the workaround, as it has not been mentioned here.

I put the fix suggested by @bahmutov and it seems to work. But it looks like an error is thrown from getSpec.js, if (Cypress.spec.absolute === '__all') { throw new Error('cypress-plugin-snapshots does not work when running all tests, this will be fixed once this bug is resolved: https://github.com/cypress-io/cypress/issues/3090'); }

If I comment this out the test works fine. The question is how do you handle this for others on the team? Tell them to npm install then go into node_modules and comment out the offending line? Is anyone else doing something more streamlined?

Any light at the end of this tunnel? The suggested fixes don’t seem to work for me 😦

Typescript users, just pass the exact spec file path to beforeEach(fixCypressSpec('/cypress/integration/spec.ts')). 👍

FYI @CSchulz @meinaart