I am getting this error when try to run the test in Cypress. Can someone help me how to resolve this, please?
This is my index.js
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false
})
The line where it errors
const env = process.env
is only valid in NodeJS, where process is a global object supplied by the Node runtime.
Cypress has both a Node process to which you can add plugins via the file cypress/plugins/index.js and a Browser process where you can add code to cypress/support/index.js.
The error comes from a package called ci-info, so it looks like you have imported it or something that uses it into cypress/support/index.js or cypress/support/commands.js, or directly into a test.
Please check all your imports.
I had to remove import "cypress" from my test. That fixed it. 9.7.0
This happened for me when I imported cypress within my test, removing that fixed the issue
This was the issue in my case , I removed it from my test's file. Now, Its working
const cypress = require("cypress");
Related
When I'm trying to run cypress test I'm getting this error:
The following error originated from your test code, not from Cypress.
\> Cannot find module './commands'
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.
I was expecting my tests to run, and I've tried to create an index.js in the support folder with:
import './commands'
Cypress.on('uncaught:exception', (err, runnable) => {
return false;
})
But that doesn't seem to work.
When I had this issue it was because I tried to import from the wrong file.
Instead of importing in the test file, commands should be imported into /cypress/support/e2e(.js|.ts) file.
Ref Custom Commands
We recommend defining queries is in your cypress/support/commands.js file, since it is loaded before any test files are evaluated via an import statement in the supportFile.
That way they are available in any test that requires them. This is because the /cypress/support/e2e.js file is automatically integrated into the start of any and all test runs.
I've been running my component tests via cypress open-ct for a while now, relying on importing /node_modules/tailwindcss/dist/tailwindcss.min.css.
Since upgrading to Tailwind v3 some of my tests are failing as there is no prebuilt CSS file I can import - everything is generated just in time.
For example, testing if a modal closes when clicking on a overlay that is fixed and full width fails as the whole modal is rendered so that it is inaccessible by Cypress.
Another side-issue that stems from not having access to Tailwind classes is that videos recorded when running tests in CI are unusable as they are just a bunch of random native elements.
I've been importing Tailwind like this at the top of each Test file (before describes)
import { mount } from '#cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";
Any ideas how to include Tailwind (preferably globally) so tests won't fail?
You can use the Tailwind CLI to generate your stylesheet on the fly.
Add this plugin in cypress/plugins/tailwind.js (be sure to change the -i source from ./src/styles/globals.css to your base CSS file):
before(() => {
cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
({ stdout }) => {
if (!document.head.querySelector('#tailwind-style')) {
const link = document.createElement('style')
link.id = 'tailwind-style'
link.innerHTML = stdout
document.head.appendChild(link)
}
},
)
})
Then, load the plugin by importing it in cypress/support/index.js:
import '../plugins/tailwind'
You should also set up a separate config file for your component tests, such as cypress/support/component.js, and specify that in your cypress.json config file:
{
"component": {
"supportFile": "cypress/support/component.js",
},
"e2e": {
"supportFile": "cypress/support/e2e.js"
}
}
Then, only include import '../plugins/tailwind' in your cypress/support/component.js config file, so that you don't perform the JIT compilation for your E2E tests (since it's unnecessary).
Michael Hays' solution works, but it rebuilds the whole .css file every time changes to the code are made, which slows tests down. An alternative would be to run tailwind externally in watch mode.
npm i -D concurrently
package.json
"scripts": {
"test": "concurrently \"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"cypress open\" "
},
cypress/support/component.ts
import "../../dist/index.css";
I see you're using import '/node_modules/tailwindcss/dist/tailwind.min.css' which expects a pre-compiled bundle. If you have any customization added to the tailwind config, those would not be covered.
But if you can't use the generated css and don't have any tailwind customization, you could use the cdn version from https://cdn.tailwindcss.com/
Because you are running it in a test and don't want to add to possible "flakyness" of using remote dependency, you'll likely want to download that file and keep it in the repo and update it manually from time to time. You can also use some automation for getting the correct version from the cdn before running the test, but Ideally you'd use the generated css, since that's what you're shipping so that's the resource that should be getting tested.
I have a "react" app, #controlsBar should be visible when mouseover #video-container, but the following code failed
cy.get("#controlsBar").should("be.hidden");
cy.get("#video-container")
.trigger("mouseover")
.then((elem) => {
cy.get(elem).children().eq(3).should("be.visible"); //this is #controlsBar
//cy.get("#controlsBar").should("be.visible"); //this failed also
cy.get("#controlsBar").invoke("show");
});
I would suggest you to use the cypress-real-events package.
To Install use npm install cypress-real-events.
Then under cypress/support/index.js file write import "cypress-real-events/support";.
Then in your test you can write:
cy.get("#video-container").realHover()
We're using Cypress for testing an app build with Create React App, and our CRA app is setting a custom import path in .env – NODE_PATH=src/ – so that we can import files "absolutely", e.g. import Foo from 'components/Foo' vs. import Foo from '../../components/Foo'
The problem is, if we import one of the files from our CRA into a Cypress test, and the imported file includes something like import routes from 'lib/routes' Cypress doesn't know how to process that path and the import fails.
Example
Let's say we have the following files:
/cypress/integration/test.js
import routes from '../../src/lib/routes';
// Tests here…
/src/lib/routes.js
import { routeHelpers } from 'lib/routes';
// Routing code here
In this scenario, when /cypress/integration/test.js imports /src/lib/routes.js it will encounter the absolute import of 'lib/routes' and have no idea how to resolve that path.
Is there a way to set custom paths for Cypress to include when searching for imports in this way? In the case of this arbitrary example, it would mean telling Cypress to use src as a directory to resolve imports from.
Easiest solution for this turned out to be simply running the cypress commands with NODE_PATH=src. So my package.json was simply updated to the following:
"scripts": {
"cypress:open": "NODE_PATH=src cypress open",
"cypress:run": "NODE_PATH=src cypress run",
},
I had a similar issue and I was using .env with NODE_PATH=src
Solution: I removed .env and created jsconfig.json for absolute imports.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This is the recommended approach in the CRA docs: https://create-react-app.dev/docs/importing-a-component/#absolute-imports
I was writing composer test.In my origin codes, the logic.js include request.post which interact with other server. I add
var request = require('request') in the beginning to avoid error which is
"error 'request' is not defined".
in this way, I can translate the package into a .bna file, and work well.
But when I try to write some unit test with 'embeded', the error came up with
ReferenceError: require is not defined.
I add the 'require' package in my package.json file.
this is because that 'eslint' is complaining it doesn't know what to do with request when you run npm test etc.
We shoud add the comment like
/* global getAssetRegistry getFactory emit request */
follow the example:
https://github.com/hyperledger/composer-sample-networks/blob/master/packages/basic-sample-network/lib/sample.js#L15