Cypress is a end-to-end testing framework which is fast, easy and reliable testing for anything that runs in a browser.
Cypress version: 8.3.0
When using Cypress with ReactJS, you may run into a scenario where the tests run the first time, but subsequent tests break out of the Cypress tests run frame; and just shows your app, or your apps loading indicator. So your tests stop.
While clearing the Cypress cache fixes the tests for the next run, there should be a better solution.
In the developers tools, if you enable preserve logs for the console and network, you may see a redirect to `__`
Some searching for `cypress redirects to __` will lead you to
'Cypress test runner redirects to __ suddenly'
which suggests adding
`
Cypress.on('window:before:load', (win) => {
Object.defineProperty(win, 'self', {
get: () => {
return window.top
}
})
});
`
To add to your Cypress config,
assuming in `cypress.json` you have your support dir set to
"supportFile": "[app-product]/support",
add the suggestion to a file
support/callbacks/fix_iframe_redirects.js
and in the support/index.js,
reference the file
import './callbacks/fix_iframe_redirects';
You may have to force refresh the Cypress browser, or clear the Cypress cache once more.
Additional config to check for:
While this seems to be the default, if you happen to be using an ejected Webpack config, also check that `navigateFallbackWhitelist` is set to check for `__`.
...
new SWPrecacheWebpackPlugin({
...
navigateFallback: publicUrl + "/index.html",
navigateFallbackWhitelist: [/^(?!\/__).*/]
});
You may also encounter the generic error:
TypeError: Cannot set property name of which has only a getter
Unfortunately, it seems that you can either delete the Cypress cache each time, or disable Chrome web security
tests/cypress/cypress.json
"chromeWebSecurity": false,
With these changes, your Cypress tests should stay framed and run as expected.
-End of Document-
Thanks for reading
