loading CSS - cannot assume node_modules path

[bahmutov]

edge case:

In our Cypress example recipes repo https://github.com/cypress-io/cypress-example-recipes each separate application is in a subfolder and all dependencies are installed at the root level. Thus we only need to clone the repo, run npm install from the root and then inside each examples/... folder we can start the app and run Cypress tests. Example package json from branch that uses this plugin is testing-redux-store and pull request https://github.com/cypress-io/cypress-example-recipes/pull/211

The application is in examples/blogs__testing-redux-store and its package.json is just

{
  "name": "blogs__testing-redux-store",
  "version": "1.0.0",
  "description": "Testing Redux store using Cypress",
  "private": true,
  "scripts": {
    "start": "../../node_modules/.bin/react-scripts start",
    "cypress:run": "../../node_modules/.bin/cypress run",
    "cypress:open": "../../node_modules/.bin/cypress open"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

(or at least it should be this)

"cypress-plugin-snapshots": "1.0.6" is installed in the root folder.

But if I run tests I get an exception

Error:    CypressError: Timed out retrying: cy.readFile("node_modules/diff2html/dist/diff2html.css") failed because the file does not exist at the following path:

/Users/gleb/git/cypress-example-recipes/examples/blogs__testing-redux-store/node_modules/diff2html/dist/diff2html.css

Because this error occurred during a 'before all' hook we are skipping all of the remaining tests.

I have not looked at the dependency loading code, but I know it can be in an unexpected place, see how I load CSS for cypress-dark here https://github.com/bahmutov/cypress-dark/blob/0460aa71a23080780605936257896ed3f0777cb9/src/utils.js#L7 which is ugly.

I was thinking a better way would be to somehow to ask the plugin where it is installed - because it has access to the true __dirname without browserify wrap. Then the front end code can correctly do its part, or even ask the plugin via cy.task for the path to load.

[bahmutov]

for now I work around this by installing cypress-plugin-snapshots in examples/blogs__testing-redux-store folder, but I really would prefer only the root folder install.

[meinaart]

Yeah paths are hard in Cypress. Because if you want to use cy.readFile you need to access it's path relative to Cypress directory.

I like your suggestion to do it via the plugin in a task. Will investigate it.

Thanks for the feedback by the way. Much appreciated.

[meinaart]

@bahmutov I am now loading the files via a task. This should solve the issues where paths are not 100% reliable.

I am not 100% convinced by this solution, it seems a bit slow. Perhaps I could cache the results in memory somehow so it doesn't have to execute the task every time. But I am not sure how this would behave since the tests run in isolation.

Can you verify if it also works in your setup?