Comments (24)
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
from cypress-plugin-snapshots.
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: #37)
from cypress-plugin-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();
});
from cypress-plugin-snapshots.
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')
(...)
from cypress-plugin-snapshots.
Seems not to be working if you are using TypeScript.
from cypress-plugin-snapshots.
I will remove the fix, it was causing other issues and the real reason is a bug in Cypress:
cypress-io/cypress#3090
from cypress-plugin-snapshots.
There is no reason to manually specify the path: cy.fixCypressSpec(__filename);
from cypress-plugin-snapshots.
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)
;)
from cypress-plugin-snapshots.
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)..
from cypress-plugin-snapshots.
Typescript users, just pass the exact spec file path to beforeEach(fixCypressSpec('/cypress/integration/spec.ts'))
. 👍
from cypress-plugin-snapshots.
Any light at the end of this tunnel? The suggested fixes don't seem to work for me :(
from cypress-plugin-snapshots.
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?
from cypress-plugin-snapshots.
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.
from cypress-plugin-snapshots.
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 "/"
from cypress-plugin-snapshots.
Could this plugin run the fix (workaround) internally?
from cypress-plugin-snapshots.
This was quite hard to fix but I managed it. Probably need to contact Cypress about why Cypress.spec
is not correct when running all tests. Or why they don't populate the "file" field in Mocha.
from cypress-plugin-snapshots.
@tomitrescak can you verify it works?
from cypress-plugin-snapshots.
Investigate if this would work as a possible fix.
Cypress.mocha.getRunner().suite.ctx.currentTest.title
from cypress-plugin-snapshots.
Seems not to be working if you are using TypeScript.
+1 @CSchulz
When using typescript, the workaround mentioned by @bahmutov does not work, as the __filename
resolves to index.js
, which is a result of the fact that typescript is being transpiled to js, so (depending on your setup), it will reference the file in which the ts -> js transformation took place (plugins/index.js, for example)
from cypress-plugin-snapshots.
+ if using cypress-cucumber-preprocessor
, then one could write a "Given" step like so:
Given('I use snapshots for {string} feature', (fileName) => {
cy.fixCypressSpec(fileName);
});
And in specs/features that use the snapshotting specify that:
Given I use snapshots for "/cypress/integration/mytest.feature" feature
But still would be nice to avoid all these workarounds ;)
from cypress-plugin-snapshots.
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?
I had this problem too. Solved the issue by forking the plugin, modifying the fork by commenting out those lines that throw the error, and using that forked module in package.json.
from cypress-plugin-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(); });
if i use it globally it saves all the snapshots as index.ts.snap, but works if i call it as a command within tests, which i feel is preferable anyway
from cypress-plugin-snapshots.
@SSDlm Thanks for pointing that issue out! That's a bug I discovered shortly after I posted the above solution. I meant to come back here and update but never did 😖
from cypress-plugin-snapshots.
if i use it globally it saves all the snapshots as index.ts.snap, but works if i call it as a command within tests, which i feel is preferable anyway
If you change:
const { absoluteFile, relativeFile } = this.test.invocationDetails;
to:
const { absoluteFile, relativeFile } = this.currentTest.invocationDetails;
it works in a global beforeEach.
from cypress-plugin-snapshots.
Related Issues (20)
- (bug) cypress-plugin-snapshots errors out in component testing HOT 2
- Is it possible to remove the separator when generating the file name? HOT 1
- (bug) Cypress-image-snapshot makes the cut image
- (feat) Make the command retry on failure
- Can't pass updateSnapshots=true in npm script to update existing snapshots HOT 2
- Functionality of the plugin
- Maintaining this plugin HOT 8
- (bug) Typo in toMatchSnapshot type definition
- (bug) Update `socket.io`
- Update plugin to be compatible with Cypress 10 HOT 10
- attempt number is add to snapshot name(bug)
- Update snapshot button is missing (bug)
- Newcomers - Inactive repository HOT 3
- (bug) crypto.randomBytes is not a function
- (feat) Comparing screenshots from the same test run
- (bug) peerDependency on Cypress 4.x HOT 4
- (bug) Error reported during parallel execution of case;error message:listen EADDRINUSE: address already in use 127.0.0.1:2121
- Please make a new npm release
- Snapshot Compare Broken (bug)
- (feat) pixelmatch threshold control HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cypress-plugin-snapshots.