I've added the Cypress Vue Component Test runner to an existing Vue app and I want all the test files to be in the same directory as the components. However, whatever I put in my cypress.json file seems to be ignored and cypress always wants to look in the default integration folder.
In my cypress.json file I have:
{
"component": {
"componentFolder": "src",
"testFiles": "**/*.spec.ts",
"testMatch": [
"**/src/**/*.spec.[jt]s?(x)"
]
},
}
but when I run
npm run cy:run:chrome
I get:
> vue-myapp#0.1.0 cy:run:chrome
> cypress run --browser chrome
Can't run because no spec files were found.
We searched for any files inside of this folder:
/Users/richardshergold/Projects/vue-myapp/cypress/integration
You can change the default folder that Cypress looks in for tests using integrationFolder in your cypress.json. This value defaults to cypress/integration.
Even when adding a testFiles field, Cypress will restrict that search to the integrationFolder value.
...
"integrationFolder": "/path/to/tests/folder",
...
Related
By default, Cypress compiles e2e tests with a built-in webpack config, which used to be fine because Vue-CLI also used Webpack; however, now that I've upgraded to Vue 3 and Vite, no webpack.
I have two options:
Revive the old webpack config for my Vue 2 project and update it for Vue 3 just to run Cypress' e2e tests.
Figure out how to tell Cypress to compile the app with Vite and not Webpack
I can't figure out #2, and I don't want to do #1 because having two different compilation methods sounds like a really bad future headache.
So far, I have this for my Cypress config:
import { devServer } from '#cypress/vite-dev-server'
import { defineConfig } from 'cypress'
import * as path from 'path'
export default defineConfig({
chromeWebSecurity: false,
projectId: '5kusbh',
requestTimeout: 10000,
responseTimeout: 60000,
viewportHeight: 1080,
viewportWidth: 1920,
e2e: {
baseUrl: 'http://localhost:8080',
setupNodeEvents (on, config) {
on('dev-server:start', (options) => {
return devServer({
...options,
viteConfig: {
configFile: path.resolve(__dirname, 'vite.config.ts'),
},
})
})
return config
},
specPattern: 'cypress/e2e/**/**.spec.js',
},
})
However, when I run Cypress, I get a webpack compilation error, which is telling me Vite is not compiling the application for Cypress.
Note Otherwise, my application is working great - I just can't run Cypress, and we have hundreds of unit, integration, and e2e tests written in Cypress.
TL;DR; I need help configuring Cypress to use my app's Vite config to compile its e2e tests and run it's dev server.
EDIT:
I removed my config to see how it'd run just hitting localhost, but Cypress must be trying to compile my code, because it's struggling with the Vite env variable syntax, import.meta.env.[insert key name here] in non-Cypress JavaScript files because it's not process.env...
For e2e tests, the execution of tests is separate from running the app and you access the app using cy.visit(). #cypress/vite-dev-server was for running component tests prior to cypress 10. But with cypress-vite you can also compile e2e tests using vite and use the same configuration as your app, so you don't need to config the webpack anymore.
I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!
Im trying to write my first test in Jest and cannot make my configuration run with a Vue Component.
In my Laravel Project I installed the needed npm packages with following commands:
npm install -—save-dev jest vue-jest jest-serializer-vue
npm install #vue/test-utils
In my package.json i have following configurations:
"scripts": {
...
"test" : "jest"
}
...
"jest": {
"testRegex": "tests/Javascript/.*.spec.js$"
},
My test is in the given Directory "root/tests/Javascript/Mytest.spec.js".
My test looks like this:
import { mount } from '#vue/test-utils';
// If this is removed it works....
import MyVuePage from './../../resources/js/pages/MyVuePage.vue';
describe('Something', () => {
it("Awesome", () => {
expect(1).toBe(1);
});
});
I get following Error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with >the "moduleNameMapper" config option.
In the Console there is a little Arrow Pointing on my "i" of "import SeriesVersion from './../../resources/js/pages/MyVuePage.vue';"
I run the test by writing "npm run test" into the console.
Can you tell me what im doing wrong?
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
I've got some JS tests written in mocha/chai and I would like to run them in a project scaffolded using the webapp generator.
I've put my tests inside the "test" folder from Yeoman's structure and the tests are running fine. But the issue is that the grunt test command is only showing the test results in the console, not in the browser.
I'm looking for a way to run the command and have the tests shown in the browser. How can I do that?
Thanks for any help!
Please consider this part of connect's configuration (more precisely, this is a sub-task of connect):
test : {
options : {
middleware : function(connect) {
return [
require('connect-livereload')(),
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
},
port : grunt.option('port') ? Number(grunt.option('port')) + 1 : 9001
}
}
The above will make files from the specified folders available through http.
.tmp is where my transpiled coffeescript and SCSS is landing as regular JS/CSS
test is where my tests reside together with a very simple index.html file which wires all JS/CSS together, including mocha.js and mocha.css
Later in my Gruntfile I register the test task:
grunt.registerTask('test', function(target) {
var tasks = [
'clean:server',
'coffee',
'jst',
'connect:test'
];
if (target === 'browser') {
tasks.push('open:test');
tasks.push('watch');
} else {
tasks.push('mocha');
}
grunt.task.run(tasks);
});
The part which is relevant to your problem is 'connect:test' which makes it possible to access the tests through the browser, and this one:
if (target === 'browser') {
tasks.push('open:test');
tasks.push('watch');
} else {
tasks.push('mocha');
}
As long as you don't specify browser as your test target, the tests will run headlessly in the console. But if you go like grunt test:browser, Grunt will open a browser thanks to open:test. For your reference, I also include my open:test config:
test : {
path : 'http://localhost:<%= connect.test.options.port %>'
}