Comments (10)
Good to hear that my work saves other people work. That was my intention ;).
You are right that fs is not available in the browser. But it should not execute prettier in that context. I can investigate this.
It would be very helpful if you could supply an example that triggers this bug. @btang-aa
from cypress-plugin-snapshots.
Did you run npm install
in Cypress directory?
from cypress-plugin-snapshots.
@meinaart I am a colleague of @btang-aa I tried to debug it for a bit and I think I might know where the problem comes from.
The commands.js
requires the utils/snapshots.js
the snapshots file requires prettier
. As the commands.js
code gets executed in the browser, we actually end up trying to require prettier
in the browser which does not work.
I think the plugin might need to seperate code that can run on browser and server-side, and which are server only to prevent issues like this from occurring. Especially when you are considering to add features like screenshot comparison which need to heavily rely on the cy.task
and server side execution.
You can ignore this comment, I tried it with the kitchensink example of Cypress and it works there.
from cypress-plugin-snapshots.
I was able to track it down to the preprocessor we use webpack
, I forked the kitchensink and modified it so that you can easily reproduce it. https://github.com/renelux/cypress-example-kitchensink/tree/cypress-plugin-snapshots
To reproduce just try to run any of the spec files after Cypress opens.
from cypress-plugin-snapshots.
Any chance you're just missing a proper target? I think maybe the webpack need to target node: https://webpack.js.org/concepts/targets/
The weird thing is that some cypress code target node and other target the browser; so it's unclear to me if this would then create the inverse problem (code running fine in Node, but throw error in the browser)
from cypress-plugin-snapshots.
@SBoudrias if I change the target to node
I get the following error.
Uncaught ReferenceError: require is not defined
This error originated from your test code, not from Cypress.
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
Check your console for the stack trace or click this message to see where it originated from.
at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
at r (tests?p=cypress/support/index.js-750:1)
at Object.<anonymous> (tests?p=cypress/support/index.js-750:1)
at r (tests?p=cypress/support/index.js-750:1)
at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
at r (tests?p=cypress/support/index.js-750:1)
at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
at r (tests?p=cypress/support/index.js-750:1)
at Module.<anonymous> (tests?p=cypress/support/index.js-750:58)
at r (tests?p=cypress/support/index.js-750:1)
I am wondering what is the difference between the default processor browserify
and webpack
that is causing this particular problem.
from cypress-plugin-snapshots.
I am working on a fix by separating the utils a bit more. But this is in my toMatchImageSnapshot
branch. So I am trying to get that to work.
If that takes too much time I will release a fix for this issue a bit earlier.
from cypress-plugin-snapshots.
@meinaart we are not convinced that will completely solve the problem as it seems to be related to webpack
. We are still investigating a bit on what is the difference between the browserify-preprocessor
and the webpack-preprocessor
.
from cypress-plugin-snapshots.
I think this should be fixed in 1.2.0
from cypress-plugin-snapshots.
Bravo! It works! Thanks very much, and the plugin gives us the exact what we want!
from cypress-plugin-snapshots.
Related Issues (20)
- 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
- (bug) npm i cypress-plugin-snapshots - npm error while installing HOT 6
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.