I am using Cypress (version:10+) + Cucumber+ Typescript. I need to run the test using tags. Also, I tried cypress-tag but it's not working. Is there a way I can run the cypress test using tags without skipping the test?
You can refer to this sample repository for your setup check it here:
https://github.com/badeball/cypress-cucumber-preprocessor/tree/master/examples/browserify-ts
in your cypress.config.ts
import { defineConfig } from "cypress";
import { addCucumberPreprocessorPlugin } from "#badeball/cypress-cucumber-preprocessor";
import browserify from "#badeball/cypress-cucumber-preprocessor/browserify";
async function setupNodeEvents(
on: Cypress.PluginEvents,
config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
browserify(config, {
typescript: require.resolve("typescript"),
})
);
// Make sure to return the config object as it might have been modified by the plugin.
return config;
}
export default defineConfig({
e2e: {
specPattern: "**/*.feature",
supportFile: false,
setupNodeEvents,
},
});
in your package.json should contain the following dependencies and important to set cypress-cucumber-preprocessor settings "filterSpecs: true" and "omitFiltered: true" to run successfully through tags
{
"dependencies": {
"#badeball/cypress-cucumber-preprocessor": "latest",
"#cypress/browserify-preprocessor": "latest",
"cypress": "latest",
"typescript": "latest"
},
"cypress-cucumber-preprocessor": {
"filterSpecs": true,
"omitFiltered": true
}
}
then you can run your feature files like this:
cypress run --env tags=#foo
Best solution to it is the Cucumber Cypress preprocessor. I was able run my test using tags without any issue. The problem I faced in Cypress version 10 was the Itegration folder in the Cypress folder structure was renamed to e2e folder. And in Cucumber-Cypress-preprocessor will always look for files in integration folder (which was there in Cypress version less than 10) for searching tags.
I think the better solution is cypress-grep you can check about cypress-grep in the follow link https://github.com/cypress-io/cypress-grep
Related
I am migrating some jest tests over to vitest and some of my tests are failing due to an import issue of an external package dependency in node_modules. Specifically: #package/dependency seems to be an ES Module but shipped in a CommonJS package.
vitest suggests this change to my config:
export default {
test: {
deps: {
inline: [
"#package"
]
}
}
}
Unfortunately, this fix does not work. Previously I resolved this issue with moduleNameMapper in jest where "#package/dependency": "#package/dependency/js" mapped to a valid import. I tried setting alias in both test.alias and resolve.alias, but neither works.
I am using Typescript in this project, and the rest of my test config looks like this:
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/setupTests.js",
}
// setupTests.js
import {configure} from 'enzyme/build';
import Adapter from 'enzyme-adapter-react-16/build';
configure({ adapter: new Adapter() });
What can I do to get around this? Thanks.
I have written this small typescript hello world example
import axios from 'axios';
import { wrapper } from 'axios-cookiejar-support';
import { CookieJar } from 'tough-cookie';
const jar = new CookieJar();
const client = wrapper(axios.create({ jar }));
client.get('https://example.com');
when I run this from webstorm i get the following error
/usr/bin/node /usr/local/lib/node_modules/ts-node/dist/bin.js /home/nayana/WebstormProjects/hello-world/hello.ts
Error: Cannot find module 'node:url'
anyone have idea on how to resolve this?
I already tried npm install node:url and url
i have isolated the error to this line
const client = wrapper(axios.create({ jar }));
The issue maybe is related to the node version.
The axios-cookiejar-support requires a specific node version ("node": ">=14.18.0 <15.0.0 || >=16.0.0").
Check node --version and package-lock.json.
Sample:
"node_modules/axios-cookiejar-support": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/axios-cookiejar-support/-/axios-cookiejar-support-4.0.3.tgz",
"integrity": "sha512-fMQc0mPR1CikWZEwVC6Av+sD4cJuV2eo06HFA+DfhY54uRcO43ILGxaq7YAMTiM0V0SdJCV4NhE1bOsQYlfSkg==",
"dependencies": {
"http-cookie-agent": "^4.0.2"
},
"engines": {
"node": ">=14.18.0 <15.0.0 || >=16.0.0"
},
"peerDependencies": {
"axios": ">=0.20.0",
"tough-cookie": ">=4.0.0"
}
},
You might need to install a later version of node.js.
I was running 14.17.6 and after installing 16.17.0 with nvm then I was able to run the project.
If you have nvm installed you can install a specific version of node e.g.
nvm install 16.17.0
make sure the types array in your tsconfig.json file contains "node"
{
"compilerOptions": {
"types": [
// ... your other types
"node"
],
// ... your other settings
},
}
The only thing you need to do, if you didn't install typescript is to change in the vite.config.js file, the import line like this:
import { fileURLToPath, URL } from 'node:url'
To:
import { fileURLToPath, URL } from 'url'
I am trying to create a Chrome DevTools Extension with Vite.
There are a couple different entry points. The main two are src/background.ts and devtools.html (which references src/devtools.ts).
There are is some code that I want to shared between them in src/devtools-shared.ts.
After running the build, the entry points still contain import statements. Why and how do I get rid of them so they are self-contained bundles (Ideally not IIFE, just good old top level scripts)?
Here is what I have got:
vite.config.js:
const { resolve } = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
resolve: {
alias: {
"root": resolve(__dirname),
"#": resolve(__dirname, "src")
}
},
esbuild: {
keepNames: true
},
build: {
rollupOptions: {
input: {
'background': "src/background.ts",
'content-script': "src/content-script.ts",
'devtools': "devtools.html",
'panel': "panel.html",
},
output: {
entryFileNames: chunkInfo => {
return `${chunkInfo.name}.js`
}
},
// No tree-shaking otherwise it removes functions from Content Scripts.
treeshake: false
},
// TODO: How do we configured ESBuild to keep functions?
minify: false
}
})
src/devtools-shared.ts:
export const name = 'devtools'
export interface Message {
tabId: number
}
src/background.ts:
import * as DevTools from './devtools-shared'
src/devtools.ts:
import * as DevTools from './devtools-shared'
And then in dist/background.js I still have:
import { n as name } from "./assets/devtools-shared.8a602051.js";
I have no idea what controls this. I thought there would not be any import statements.
Does the background.ts entry point need to be a lib or something?
For devtools.html is there some other option that controls this?
I know there is https://github.com/StarkShang/vite-plugin-chrome-extension but this doesn't work very well with Chrome DevTool Extensions. I prefer to configure Vite myself.
It turns out that this is not possible. Rollup enforces code-splitting when there are multiple entry-points. See https://github.com/rollup/rollup/issues/2756.
The only workaround that I can think of is to have multiple vite.config.js files such as:
vite.config.background.js
vite.config.content-script.js
vite.config.devtools.js
Then do something like this in package.json:
"scripts": {
"build": "npm-run-all clean build-background build-content-script build-devtools",
"build-background": "vite build -c vite.config.background.js",
"build-content-script": "vite build -c vite.config.content-script.js",
"build-devtools": "vite build -c vite.config.devtools.js",
"clean": "rm -rf dist"
},
This is not very efficient as it repeats a lot of work between each build but that's a Rollup problem.
I have the following configuration in my jsconfig.json file:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": ["src"]
}
Which lets me do this:
import { App } from 'components'
import * as actions from 'actions/app.actions'
Instead of this:
import { App } from '../components'
import * as actions from '../actions/app.actions'
To get started with unit testing, I've created a simple App.test.jsx in src/components/tests
import { render } from '#testing-library/react'
import { App } from 'components'
it('renders without crashing', () => {
render(<App />)
})
However, when I run yarn test (which is sugar for react-scripts test), it throws with this ugly error:
FAIL src/components/tests/App.test.jsx
● Test suite failed to run
Your application tried to access components, but it isn't declared in your dependencies;
this makes the require call ambiguous and unsound.
Required package: components (via "components")
Required by: C:\Users\Summer\Code\sandbox\src\components\tests\
23714 | enumerable: false
23715 | };
> 23716 | return Object.defineProperties(new Error(message), {
| ^
23717 | code: { ...propertySpec,
23718 | value: code
23719 | },
at internalTools_makeError (.pnp.js:23716:34)
at resolveToUnqualified (.pnp.js:24670:23)
at resolveRequest (.pnp.js:24768:29)
at Object.resolveRequest (.pnp.js:24846:26)
It seems like Jest (or Yarn?) thinks components is a node package, because it's not aware of the absolute imports setting in my jsconfig.json. Is there a way to make it aware? Or do I have to choose between 0% coverage and relative imports?
I've tried entering "moduleNameMapper" under "jest" in my package.json like the documentation explains, but it didn't help. I got the same error + one more after it.
I've also tried changing components in the test file to ../components but then it complains about actions/app.actions which is inside the <App /> component.
Module name mapper config:
/* package.json */
{
/* ... */
"jest": {
"moduleNameMapper": {
"actions(.*)$": "<rootDir>/src/actions$1",
"assets(.*)$": "<rootDir>/src/assets$1",
"components(.*)$": "<rootDir>/src/components$1",
"mocks(.*)$": "<rootDir>/src/mocks$1",
"pages(.*)$": "<rootDir>/src/pages$1",
"reducers(.*)$": "<rootDir>/src/reducers$1",
"scss(.*)$": "<rootDir>/src/scss$1",
"store(.*)$": "<rootDir>/src/store$1",
"themes(.*)$": "<rootDir>/src/themes$1",
"api": "<rootDir>/src/api.js",
}
}
}
This is because Yarn takes control of the resolution pipeline, and thus isn't aware of resolution directives coming from third-party configuration (like moduleNameMapper).
This isn't to say you have no options, though - specifically, the fix here is to avoid moduleNameMapper, and instead leverage the builtin link: dependency protocol. This has other advantages, such as being compatible with all tools (TS, Jest, ESLint, ...) without need to port your aliases to each configuration format.
See also: Why is the link: protocol recommended over aliases for path mapping?
I need to use vuetify in my nuxt js project as plugin. I've tried package #nuxtjs/vuetify but get error
Cannot assign to read only property 'base' of object '#'
I've install my nuxt project from official codesandbox online playground in local server and on shared hosting. All the time I got the same error. I tried install node modules using npm and yarn. How I can add fresh vuetify version to last version of nuxt js as plugin with npm package vuetify?
Install vuetify and #mdi/font
Create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from './../config/colors'
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
export default ctx => {
const vuetify = new Vuetify({
theme: {
themes: {
light: {
...colors
},
dark: {
// colors
}
}
}
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
Edit nuxt.config.js file by adding vuetify to plugins like this
{
...
plugins: ['~plugins/vuetify.js'],
...
}
I achieved this with the following:
npm install --save vuetify
create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Amend your nuxt.config.js:
plugins: ['~plugins/vuetify.js'],
build: {
vendor: ['vuetify']
}
There is a discussion of this issue here: https://github.com/nuxt-community/vuetify-module/issues/268
Fixing custom colours and specifying options in external files seem to affect this.
If you have colours specified in the options, replace primary: colors.blue with primary: colors.blue.base.
I have / had same issue. I simply made sure to use version 1.10.3 or below defined explicitly in package.json
"#nuxtjs/vuetify": "1.10.3", (not with the ^1.10.3)
I also noticed any version over this also adds an "undefined" 404 to the end of every url request. I posted on Nuxt / CMTY but they have a user base of zero people who answer any questions.
Choose Vuetify as ur UI Framework when initial a Nuxt project
Create a new file in plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
theme: {
light: true,
themes: {
light: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
})
Add the plugin config inside nuxt.config.js
export default {
plugins: ['~/plugins/vuetify.js'],
}
Restart server, npm run dev
An image example:
vuetify.js
Done!
you can do the following steps in order and finally use Vuetify components:
1- Setup vuetify
yarn add vuetify#next sass
2- Your package.json should now look similar to the following:
// package.json
"devDependencies": {
"nuxt": "3.0.0-rc.1"
},
"dependencies": {
"sass": "^1.51.0",
"vuetify": "^3.0.0-beta.1"
}
3- Creating your Vuetify plugin
You must create this file in the plugin folder and put these codes inside it.
// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
4- Configure Nuxt 2 or 3 to use our new plugin
In this section, you should put these codes in the nuxt.config.ts file like this
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})
5- Finally, in order to test that you have done the steps correctly, you can use this component in your code to see if Vuetify is installed correctly or not.
<v-btn>Button</v-btn>
Tip: If you have done these steps or you want to use a new component, in many cases it is better to stop and restart your project once.