Override testMatch for jest tests in create-react-app - testing

Created an app with cra, wrote some unit tests with jest and everything works great.
I then tried to create a __tests__ folder at the root of the project and created the e2e.test.js file there.
But when you run "npm run test", only the files in the /src folder are checked.
How to make jest look for test files not only in "/src"?
I have tried many different variations of the testMatch style:
"testmatch": [ "**/__tests__/**/*.js", "**/?(*.)+(spec|test).js" ]
I wrote "testMatch" in both package.json and jest.config.js but none of that helped.
It feels like there's a setting somewhere inside jest that makes it ignore everything except the "/src" folder.
I also tried something like this and it didn't work.
https://stackoverflow.com/a/74601854/17811574
How do I get to see the tests folder at the root of the project?

Related

'Cypress Config File does not exist' - Lambdatest can't see cypress configuration file

I've got installed Cypress on my Vue project and created just a few simple tests that perform great when I run Cypress with this command npx cypress open.
I am trying to implement automatisation with the help of Lambdatest but when I run command lambdatest-cypress run I receive this message in return:
Checking Lambda Config in current directory
Validating CLI
validating config
Error!! Cypress Config File does not exist
I have installed Lambdatest cli globally, added lambdatest-config.json in the root of my project, and updated "lambdatest_auth" data in this file. Also I've got cypress.config.js on the same root level in project's directory. Cypress's config file does not show any errors excluding eslint saying that
on this part
setupNodeEvents(on, config) {
// implement node event listeners here
},
on and config are declared but never used.
Do you have any ideas why I can not run this one using Lambdatest?
As always maybe someone will find it useful.
So... it would seem that in some cases lambdatest get's a little bit lost and it's config is not filled with the things it should be :)
The solution was to remove this line of code in lambdatest-config.json file which is located in the project root directory.
"cypress_config_file": "cypress.config.js", <-- remove this line

vue-cli-service won't serve if using yarn link'ed package

I've got a private npm package hosted on GitHub. The package is essentially a Vue component and I build it with vue-cli-service build --target lib --name init-map src/main.ts. Here's the main.ts's contents:
import InitMap from "./components/InitMap.vue";
export { InitMap };
I use the package inside my other project, and I develop them both simultaneously. Therefore, I want to link the package: yarn link (inside the package directory), then yarn link #smellyshovel/init-map inside the consuming-project directory.
The problem is that when I run "yarn serve" (i.e. vue-cli-service serve) inside the main project, it freezes on 69%...
... and seems to stay like that forever.
Axios doesn't seem to be a problem to me (even though the message), since 1) everything is working fine without the linked package, 2) it shows a different message sometimes (something bootstrap-vue-related on 58%) though I only saw this other message like once (and not sure what exactly caused the difference).
What am I doing wrong? Why does the serve freezes when using a linked package as a dependency? How do I solve this?
Please, name me any other stuff you would like me to show since I'm not sure what exactly could be related to the issue and therefore haven't included any details that might be of interest.
OK, the problem indeed seems to be related to resolving symlinks, and the solution would be to simply prevent webpack from resolving these symlinks: https://github.com/vuejs/vue-cli/issues/1494#issuecomment-498144990
configureWebpack: {
resolve: {
symlinks: false,
},
}

Can I select which files will be compiled in webpack or vueloader while building?

When I build my Vue project with npm run build, I would like to choose particular Vue files to be (re)compiled into the dist folder. My idea was by changing the configurations in webpack or the webpack-chain to compile from a specific entry point. An example of my goal would be:
Let's assume I have 2 components; A.vue and B.vue (and ofcourse the default files like index.html etc.)
Then I build the project, which gives me a ./dist folder with everything compiled. Then after I make changes to B.vue (and change the config file most likely), I only want B.vue to be recompiled into the ./dist folder. I already use dynamic imports so that A.vue and B.vue are different bundles, so that other files should not have to be changed.
Can I select a specific file to be compiled only?
(I am aware that the dist folder gets emptied after building, but that I will try to fix later if this could be possible)
I think you're looking for watch mode: npm run build --watch

Vue CLI 3 creating lots of '*.hot-update.js' files. How to prevent that?

For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve

How to group together certain tests or files when doing a run in Cypress?

I am currently running Cypress and I have folders inside of it, where I have tests located for different applications.
I have a folder entitled "smhw-qa" which contains sub-folders and tests files for this specific application.
This directory apps will also include other applications too in future.
What I wish to do
In order to avoid having to run every test for a run, I wish to only run this specific folder. The location of the folder is as such:
'cypress/integration/apps/smhw-qa'
Over time, there will be more folders and tests added to the apps directory.
I am familiar with how to run a specific file, so doing the following works:
npx cypress run --spec 'cypress/integration/apps/smhw-qa/banners_promos_global/global_search.js'
How can I specify to Cypress which folder to run specifically when I use the npx cypress -run command?
What I have tried already
To run a specific test file I tried:
npx cypress run --project 'cypress/integration/apps/smhw-qa'
But this provides an error instead:
Can't run because no spec files were found.
We searched for any files inside of this folder:
/Users/jaswindersingh/Documents/cypress-automation/automation/cypress/integration/apps/smhw-qa/cypress/integration
Running specific sets of tests by their folders will be much easier for me, and will save time when running a specific suite of tests on our CI platform for example. I will also not need to specify the individual files since this is time-consuming.
It would also mean I can split out my tests and run them on different machines
Do I need to put anything into my test files, or inside of cypress.json or modify anything else, or can this be achieved through the terminal?
What options must I use instead?
Thanks
I think the clue is in the error message, you call
cypress/integration/apps/smhw-qa
and the error message shows
cypress/integration/apps/smhw-qa/cypress/integration
so to use the --project flag you need to replicate the /cypress folder per project, as per this example cypress-test-nested-projects
Folder structure:
package.json
node_modules
src/
clients/
foo/
cypress.json
cypress/
bar/
cypress.json
cypress/
However, I think you might want to use the --spec flag instead. If I understand it correctly, the glob pattern will allow you to keep the current folder structure. Docs
cypress run --spec 'cypress/integration/apps/smhw-qa/**/*'
Through --project you can manage different cypress.json files, the docs says
This enables you to install Cypress in a top level node_modules folder but run Cypress in a nested folder. This is also helpful when you have multiple Cypress projects in your repo.
so you're on the right way, just prepare some project-related cypress.json files