I have an app that was generated with Nx CLI. I can run tests for this app with Jest using the the command nx test myApp. This works fine. However, I would like to use Jest's "watch mode". when running my tests, and can't figure out how to achieve this. Nx's documentation says simply:
To run unit tests for your application:
nx test myapp
I have been unable to find any more detailed documentation for this command, or how to add any other options/flags to it. Is there anyway to use watch mode with nx test?
TL;DR: yarn affected:test --all --parallel --maxParallel 10 --watch should work.
nx test actually runs ng test which in its turn is using the #nrwl/jest:jest builder that has a --watch option (in addition to some other jest specific options). You can see all the options by running nx test --help
Warning: If you have multiple apps/libs in your repository, this will only watch your default project's tests.
If you really want to watch all your projects tests, you will have to run:
yarn affected:test --all --parallel --maxParallel 10 --watch
--all we need this otherwise, this will not run tests on projects that you "affect" after running the command
--parallel because you want to run all the tests in parallel, otherwise this will only watch the first project in the list
--maxParallel because the default limit is 3 so if you have more than 3 projects, it will only watch tests for the 3 first projects
A simple command to run test for your applications with watch is
nx test <packageName> --watch
If you want to run test for a specific file in watch mode.
nx test <packageName> --testFile=<fileName> --watch
If you want to clear cache
nx test <packageName> --clearCache
If all your projects are using jest, there should be no issues with simply running:
jest --watch
Running adding a script for that and running it in the root directory works pretty well for me!
Related
I am developing an extension for vscode using typescript. I set up a GitHub Action which is executing my test cases. To gather the test coverage I am using nyc.
These are my node scripts:
"compile": "tsc -p ./",
"test": "npm run compile && node ./out/test/runTest.js",
"coverage": "nyc npm run test"
When I run npm run coverage I see all my test cases are getting executed (they are not stored in the file runTest.js), but only the coverage for the test file runTest.js is gathered. The relevant classes lib.ts and extension.ts are not shown in the coverage.
Why is this so? What am I doing wrong?
See my package.json and .nycrc.json for configuration.
I could fix this problem by sticking to the great blogpost which I found posted on a similar Question.
The problem is, that NYC is a command line tool. When executing the test I focused on my configuration in the .nycrc file. Fact is, that the visual studio code test runner is not using this configuration and has to be configured inside the test runner.
I fixed the broken test coverage generation inside this commit.
Please help with my below questions:
"npm" is the one which comes when we install Node.js. Am I correct?
"create-react-app" package installs/loads the Babel & Webpack which are required for our React project. Am I correct?
When will the React code gets compiled & Translated? Does the below points are correct?
a. After creating React project and developing some code, we are loading our application in browser by running the "npm start" command. So while running this command, will the Babel is going to compile the React code and convert it to JavaScript code which has ES5 standards? Does this conversion to ES5 happens when we run the "npm start" command?
b. Also I learned that Webpack is going to merge all various files within the React project to a single .js file. So does this merging of all the different files by Webpack will be performed when we run "npm start" command?
So if my above understanding is correct, the React code will be Compiled, Translated & Merged into a single file when we run "npm start" command. Correct?
npm start is really just a command that exists in the package.json which can be configured to do whatever you please. It is typically use to kick off all things needed to "start" the app. In the context of a react app created using create-react-app the start command will call react-scripts start and that points to a file called react-scripts which sits in your node_modules/.bin. If you want to see everything that happens you can read through that file.
In short tho, you are correct that it will use babel to transpile the code to something the browser understands, it will use webpoack to create one bundle file (or multiple if you are using code splitting). It will also start a webpack dev server which will usually listen on port 3000 and it will open your default browser to your app. These default settings can be overwritten in the package.json.
Hope this gives you some clarity.
Is there a way to run ESLint everytime Jest's watch script triggers? I want to automatically have the watch script lint (with --fix) my files.
You can use jest-runner-eslint plugin to do exactly what you described.
https://github.com/jest-community/jest-runner-eslint
My projects uses a /server folder for my backend code and /react-ui for my client side code. There's a package.json in each folder. I can run test separately in the cmd line, but I would like to run both at the same time. I know about the multi projects feature of jest, but it doesn't seem to work with create-react-app. I'm trying to setup jest with babel as if I was not using create-react-app, but it seems like the wrong approach considering jest is already setup in CRA.
My current setup runs from the /server jest installation. With projects: ['<rootDir>', '<rootDir>/../react-ui']. The jest documentation isn't clear how I could direct it to run npm test in /react-ui
My only goal is to be able to watch both at the same time and I would like to not eject from CRA.
You can have (gulp) scripts on the main level that run each tests separately, but using same configs.
I have a yarn workspaces monorepo that looks a bit like this:
root
|_dependency1
|_dependency2
|_api
|_graphql
|_frontend
I am using yarn workspaces which is great but are there any tools about managing starting services etc.
For example at the moment, in order to start the frontend I have to:
build the dependencies
build api
start api
build graphql
start api
build frontend
start frontend
At the moment I start everything in separate tabs on my console.
It is quite unwieldy and could do with a better way.
You can use the npm-run-all package to orchestrate parallel/serial runs of npm/yarn commands.
For instance,
npm-run-all build:deps --parallel build:api build:gql build:frontend --parallel start:*
(And of course you can "package" this up as a scripts script in your package.json.)