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()
Related
I try to get an image into my prjoject via Astro/Image. The "normal" works fine but not with the component of .
I did the import :
import { Image, Picture } from "#astrojs/image/components";
...
<Image src={import('../src/images/neu/about.jpg')} width={300} alt="test"/>
I did the astro.config.mjs:
import { defineConfig } from 'astro/config';
// https://astro.build/config
import image from "#astrojs/image";
// https://astro.build/config
export default defineConfig({
site: 'https://juni-test.de',
integrations: [image()]
});
and I get this Error while dev-server shuts down:
PS C:\Users\rober\Projekte\JuniKaefer> npm run dev
> #example/basics#0.0.1 dev
> astro dev
astro v1.9.2 started in 205ms
┃ Local http://localhost:3000/
┃ Network use --host to expose
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "fetch failed".] {
code: 'ERR_UNHANDLED_REJECTION'
}
Node.js v18.13.0
So I think there is a problem to fetch the Image but the Image exists. No idea what to do.
Thanks for your help.
Astro 1.9.2 does not support Node 18, you either have to downgrade your Node version or upgrade Astro to the new 2.0 beta using the command npm i astro#beta (Astro 2.0 officially releases in 5 days on 01/24/23)
also I think the import path is invalid, assuming your on the index page src/pages/index.astro and your images are located in src/images, the import path should be
import('../images/neu/about.jpg')
I want to use Gulp and ES6modules with Yarn PnP, but Gulp with ES6modules doesn't support PnP...
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'gulp' imported from /<pathToProject>/gulpfile.js
Did you mean to import gulp-npm-4.0.2-57826bdf31-c18e6c33e6.zip/node_modules/gulp/index.js?
at new NodeError (node:internal/errors:371:5)
at packageResolve (node:internal/modules/esm/resolve:864:9)
at moduleResolve (node:internal/modules/esm/resolve:910:18)
at defaultResolve (node:internal/modules/esm/resolve:1005:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:475:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:245:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
If set nodeLinker: "node-modules" in .yarnrc.yml PnP will stop working...
Can I somehow specify the dependencies that need to be saved in node_modules in parallel with PnP?
Thx ^_^
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");
By default Storybook uses babel-loader, but the current version of babel-loader is incompatible to the one Storybook requires. So I decided to use awesome-typescript-loader instead. That is, my project uses babel-loader and Storybook uses awesome-typescript-loader.
I added the webpack.config.js file:
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
but Storybook still insist to load babel-loader.
ERR! Error: Cannot find module 'babel-loader'
How can I set up an alternative loader?
Try with #next version, there was a fix 5 days ago that solves it by skipping babel loader check.
This is how to run the init command with the #next version:
npx -p #storybook/cli#next sb init
Additionally, if you haven't already, clean up babel-loader from package.json, remove npm lock file, and re-run npm install.
Be aware #next is not the stable version, and this is not completely ideal, but if you are interested keep following the conversation
I'm building an internal tool in Laravel and I need a datetime picker for part of the interface. My research has suggested that Tempus Dominus is the solution most people use to solve this.
I've installed Tempus Dominus and Moment (through Node) and added them both to my app.js file. However when I try to compile the JS I get the following warning:
WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
# ./node_modules/moment/min/moment.min.js
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/sass/app.scss
This is how I'm importing them in the app.js file:
require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');
What am I missing?
The official Tempus Dominus Bootstrap plugin is unmaintained and is kinda buggy when it comes to ES6 and module bundlers.
I strongly advise you to install these two forks instead:
https://www.npmjs.com/package/tempusdominus
https://www.npmjs.com/package/tempusdominus-bootstrap
npm i tempusdominus tempusdominus-bootstrap
If you wanna make it work, you should inject/provide moment and jquery imports in the final build of your application (1st option), or make them globally available (2nd option).
1st option
What is your module bundler?
E.g., if you are using Rollup, you can configure the build like this using the Rollup's #rollup/plugin-inject plugin:
// Your imported plugins...
import inject from "#rollup/plugin-inject";
export default {
input: "src/index.js",
output: [
// You outputs...
],
plugins: [
inject({
$: "jquery",
jQuery: "jquery",
moment: "moment",
exclude: "src/**",
}),
// Your other Rollup plugins here...
],
};
For Webpack, you'd need to use the ProvidePlugin:
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
moment: 'moment'
})
]
};
2nd option
The other option would be to make moment and jQuery globally available in your app by adding the following lines to your index.js main entry point file:
import moment from "moment";
import $ from "jquery";
window.$ = window.jQuery = $;
window.moment = moment;
// Your other imports (tempusdominus-bootstrap as well) go here...
Though I didn't test, both options should work (let me know if not).
Of course, the preferred one would be to use a module bundler (1st option) and not to expose jQuery and/or moment to window.
And if you are using React, I advise you to use this library here instead (demo here). But that's another story.