I am using cypress 10.0.0, I try to integrate multiple test (spec) file on cypress.config.ts, is possible on new cypress update ??
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
supportFolder: 'cypress/support',
fixturesFolder: 'cypress/fixtures',
screenshotsFolder: 'cypress/screenshots',
videosFolder: 'cypress/videos',
baseUrl: 'http://localhost:5200',
retries: {
runMode: 5,
openMode: 5,
}
},
});
Yes it is possible, create a new e2e spec that just imports all other specs.
cypress/e2e/all.cy.js
import './spec1.cy.js'
import './spec2.cy.js'
import './spec3.cy.js'
Then chose all.cy.js as the spec to open in the runner.
To run all spec files together you have to use the command:
npx cypress run
Related
I am trying to run cypress test cases headless using cmd command
npx cypress run
But it gives me below error -
Do I need to install any dependency for this to load.
Even css files are not getting loaded.
Note : I haven't installed webpack or any other dependency. Only cypress is installed additionally.
Yes, you will need to extend the webpack configuration used by cypress to handle the files you would like to load. You can find an example here
Below I've modified the example to work with cypress 10.
// cypress.config.ts
import { defineConfig } from 'cypress';
import findWebpack from 'find-webpack';
import webpackPreprocessor from '#cypress/webpack-preprocessor';
const webpackOptions = findWebpack.getWebpackOptions();
const options = {
webpackOptions,
watchOptions: {},
};
export default defineConfig({
e2e: {
setupNodeEvents(on) {
// implement node event listeners here
// on('file:preprocessor', webpack(options));
// use a module that carefully removes only plugins
// that we found to be breaking the bundling
// https://github.com/bahmutov/find-webpack
const cleanOptions = {
reactScripts: true,
};
findWebpack.cleanForCypress(cleanOptions, webpackOptions);
on('file:preprocessor', webpackPreprocessor(options));
},
specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
},
});
I created a React project by running npx create-react-app my-app
I installed mqtt-react-hooks
I added the App script
import { Connector } from 'mqtt-react-hooks';
import Status from './Status';
function App() {
return (
<Connector
brokerUrl="mqtt://127.0.0.1:80/"
parserMethod={(msg) => msg} // msg is Buffer
>
<Status />
</Connector>
);
}
export default App;
I get this error in the console
As mentioned in answers here please also consider the following:
npm install --save buffer
import {Buffer} from 'buffer';
It won't help in case of external library dependency but might save you from reverting other libraries in case of using Buffer in code directly.
I had this problem too.
Recently I create a new version of react app and when I used mqtt.js ( not mqtt-react-hooks ) this bad Error was shown!!!
I found out Webpack version 5 does not support Buffer and so on.
Webpack 5 removes Buffer (see this info), effectively breaking MQTT library since it has explicit usages of it in the code.
so I downgrade to Webpack 4 and it's work.
if you don't know how to do that, this link might be helpful.
How to downgrade version of Webpack?.
To me downgrading react-scripts to version 4.0.3 fixed the problem. It is not a proper fix but its something...
In my case I needed to do the following also:
In package.json use react-script 4.0.3
Remove package-lock.json
remove node_modules folder
run npm install
After all this everything seems to be working fine.
In Webpack version 5, Webpack no longer automatically polyfill's Node.js API's if they are not natively supported anymore. The browser environment does not support Buffer natively, therefore we now need to add a third party Buffer package and point Node.js to it in the Webpack config. See how to polyfill buffer with webpack 5.
Use this on the page or function where you get an error:
window.Buffer = window.Buffer || require("buffer").Buffer;
for me what worked was:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import path from 'path'
import inject from '#rollup/plugin-inject'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
}
},
build: {
rollupOptions: {
plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
},
},
})
reply to this comment:
https://github.com/vitejs/vite/discussions/2785#discussioncomment-1452855
the only solution that worked for me was this:
npm add node-stdlib-browser
npm add -D vite-plugin-node-stdlib-browser
and then:
// vite.config.js
import { defineConfig } from 'vite'
import nodePolyfills from 'vite-plugin-node-stdlib-browser'
export default defineConfig({
// other options
plugins: [nodePolyfills()]
})
I am trying to migrate a CRA react application to NX, following steps on the official site
When I hit nx serve
I am facing the following error:
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/png-js/dist/png-js.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\png-js\dist'
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/pdfkit/dist/pdfkit.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\pdfkit\dist'
Knowing that: before I start migration my project worked fine.
npm version: 6.14.11
node version: 14.16.0
I've tried to hit npm install zlib yet I get
Cannot find module './zlib_bindings'
For some reason, VSCode inserted import e from 'express' at the top of my file in react
import { response } from 'express';
I delete the above import line and then the problem is resolved, all the errors are gone after the above change.
It's about Webpack 5 and its default config you use for React app. I followed an advice from here: https://github.com/nrwl/nx/issues/4817#issuecomment-824316899 and React NX docs for how to use custom webpack config.
Create a custom webpack config, say, in /apps/myapp/webpack.config.js and reference it in workspace.json instead of "webpackConfig": "#nrwl/react/plugins/webpack". It should be "webpackConfig": "apps/myapp/webpack.config.js".
Content for webpack.config.js:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
node: undefined
};
};
So, this config change makes webpack correctly understand what polyfills are needed.
Alternatively, you can do the following:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
stream: require.resolve('stream-browserify'),
zlib: require.resolve('browserify-zlib'),
}
}
};
};
For me it was the code:
import { response } from 'express'
This was entered automatically by VSCode at the beginning of the file.
Deleting it solved the problem.
In my case was because I tried to type 'Text' and suddenly, the autocomplete added me this line on top:
import { text } from 'express';
Just deleted it and it worked fine.
Go Search Icon in VSCode search "express" you may get things like
import { text } from 'express'
import { Router } from 'express'
import { X,Y,Z } from 'express'
delete this line your app will work fine
Hi I actually need to import exported files from one application(commons) to other application(login) in some jest files, but it is not getting detected by jest.
Jest Test file:
import { auth as ServiceAuth } from "#dfs/standard"
import { ContextAlert } from '#dfs/standard';
describe("login page", () => {
it("test case 1", () => {
const ContextAlert = useContext(ContextAlert );
expect(ContextAlert).toBeTruthy()
})
})
Error Message:
FAIL src/Components/LoginPage.test.js
● Test suite failed to run
Cannot find module '#dfs/standard' from 'LoginPage.test.js'
> 1 | import { auth as ServiceAuth } from "#dfs/standard"
| ^
2 | import { ContextAlert } from '#dfs/standard';
3 |
4 | describe("login page", () => {
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:299:11)
at Object.<anonymous> (src/Components/LoginPage.test.js:1:1)
jest.config.js
module.exports = {
transform: {
"^.+\\.(j|t)sx?$": "babel-jest"
},
moduleNameMapper: {
"\\.(css)$": "identity-obj-proxy",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-
obj-proxy",
}
};
But the file is getting imported in the component files with the same syntax.
How can I import the file in the jest test file ?
Jest is a very different environment than the browser, and resolving modules is also different. The code being loaded in Jest is not bundled and has not been processed through Webpack so externals are not resolved at run-time.
To enable unit tests with cross microfrontend imports, these are your options:
Publish mocks for that shared dependency (so that the mock and the actual implementation are nearest to each other)
Mock the shared dependency with Jest’s moduleNameMapper configuration
Mock the shared dependency locally in a __mocks__ file
Publish the shared dependency to a registry (npm or some other internal registry such as artifactory) and install it as a devDependency locally so that Jest can resolve it locally (though this will likely require a separate build to execute in jest/node environment)
The option you choose depends on your organization's needs.
See also: https://github.com/single-spa/single-spa.js.org/issues/389
I'm trying to use qrcode-generator in my app but no success with my settings even though it's working in plunker, in my app I'm using angular-cli and angular 2.rc-1.
Steps to reproduce:
ng new newAppName
cd newAppName
ng serve
it works, then.
npm i qrcode-generator // (note this is missing the svg support).
ng serve // still work
then change the configurations in 2 files.
angular-cli-build.js:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'qrcode-generator/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)'
]
});
};
and system-config.ts:
/**********************************************************************************
* User Configuration.
*********************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'qrcode-generator': 'vendor/qrcode-generator'
};
const packages: any = {
'vendor/qrcode-generator': {
main: 'qrcode',
defaultExtension: 'js'
}
};
// ... the rest is the same
edit new-app-name.component.ts and import the qrcode-geenerator in it like this
// vscode underline the qrcode-generator string and complai about not finding it
import * as qrcode from 'qrcode-generator';
then ng serve which is still running errors out with this message:
/path/to/project/newAppName/tmp/broccoli_type_script_compiler-input_base_path-jscpZEq5.tmp/0/src/app/new-app-name.component.ts
(3, 25): Cannot find module 'qrcode-generator'.
I tried installing the typings for it by adding this to the typings.json file:
"globalDependencies": {
"qrcode-generator": "registry:dt/qrcode-generator#0.0.0+20160412152159"
}
then running:
typings i
install successful, but still the same error.
angular-cli version:
angular-cli: 1.0.0-beta.5
node: 6.2.0
os: linux x64
Am I missing something?
Is there other configuration I'm missing?
I was able to import this finally thanks to #JavascriptMick from angular-cli's gitter I did the following, first make the format global:
'vendor/qrcode-generator': {
format: 'global',
main: 'qrcode.js'
}
then when importing do it this way:
import 'qrcode-generator';
declare let qrcode;
Hope this help.
I am not sure about the specific requirements you have, but here is an AngularJS (Version 1) app that features a QR-Code generator:
http://quir.li/qr.html
You can
enter the text
select the error code level
select a size
View/Copy/download the QR code from the screen
I am the author of said page, but the QR generator is jsqrencode by tz#execpc.com
My source code is at https://github.com/suterma/quirli/blob/master/website/qr.html