I have written unit tests using react testing library(#testing-library/react & #testing-library/dom) and jest-dom(#testing-library/jest-dom). I am able to run my tests successfully.
I am not using jest/jest-cli complete pacakge. I am using react testing library along with that jest-dom(#testing-library/jest-dom) it might be some sub pacakge or something i am not sure what to call it exactly.
How to get code coverage using react testing library?
Well, create-react-app is giving you a lot out of the box but it is also imposing some constraints...
You can't just add the flag --coverage to npm run test because that script is already running your tests in watch mode (and things like running only failed tests and other things that you can do in the interactive mode would affect your coverage report anyway).
So first thing first, run your test in single run mode.
CI=true react-scripts test --env=jsdom
And because you already have a test task in your package.json you can simplify your task as so:
CI=true npm test -- --env=jsdom
Alright, we are getting closer...
So now, on top of that add the --coverage flag and you are all set:
CI=true npm test -- --env=jsdom --coverage
To summarize your npm task could be like:
"test:coverage": "CI=true npm test -- --env=jsdom --coverage"
And you will see your report in the terminal and the coverage folder will be generated, where you can see a lot of useful info, by the way!
Since react-scripts has incorporated jest configuration, you can just type in
npm run test --coverage or yarn test --coverage, to generate coverage report.
An actual answer to this question exists: npm test -- --coverage never exits
The RTL doesn't provide testing coverage stats, but Jest does if you add the following to package.json:
"test:coverage": "react-scripts test --env=jsdom --watchAll=false --coverage"
Then you can run:
npm run test:coverage
See either the answer I link to above or Watchmaker's answer even further above for more details.
Related
I am using allure with webdriverio and mocha.After generate and opening. The report consist test cases which is not in test suite any more. Tried allure generate --clean but still getting the same result. When i delete every thing from allure result then it works .
You need to clean up the allure-results directory after each test run. You can do that manually, or prepend it to whatever command you're using to run your test. For example, if you're using npm scripts, you could do something like:
"scripts": {
"pretest": "rimraf allure-results",
"test": "wdio"
}
This uses the 'rimraf' npm module: https://www.npmjs.com/package/rimraf
I seem to get different results in the summary chart when I run
npm test -- --coverage
versus when I run
npm test -- --coverage --watch
The watched version only shows 1 test total (suites related to changed files). However it also shows all the files in the summary chart (with worse stats)
I'm wondering if the chart is cached or something? I'm not sure why there is a difference.
After you run npm test -- --coverage --watch press a to run all tests.
I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here
I'm using jest and enzyme with my create-react-app project. When I run npm test, I get an output that shows the names of the test files that passed but I'd like the output to also include the names of the tests.
Example:
Button.test.js
it ('renders button', () => {
const button = shallow(<Button type="save"/>);
expect(toJson(button)).toMatchSnapshot();
});
Right now when I run npm test the output is just:
PASS src/Button.test.js"
and the number of passed and failed tests (when the tests are successful). I would like the output to include "renders button" and any other test descriptions (like how the output looks when an rspec test is run).
From Jest's command-line options docs
--verbose
Display individual test results with the test suite hierarchy.
So running
jest --verbose
Will print all the names in describe, it, test blocks.
If you're running tests with yarn, you can do
yarn test --verbose
If you're running tests with npm, you can do
npm test -- --verbose
If you want to make this default, change your test script in package.json
"test": "react-scripts test --env=jsdom --verbose",
Now both yarn test and npm test should show all test names.
Note that, instead of
jest --verbose
you can also set verbose to true in jest.config.js:
// jest.config.js
module.exports = {
...
verbose: true,
}
The --verbose flag sounds like it might do what you are looking for. According to the docs, it displays individual test results.
I was having the same issue with create-react-app (using both jest and enzyme), but was able to get the tests to appear after appending the existing test script in package.json with --verbose=true. So it now appears "test": "react-scripts test --env=jsdom --verbose=true"
after doing this configuration in package.json( "test": "react-scripts test --env=jsdom --verbose",) try running your test by npm test.
Note : with npm run test description is not reflecting for me as well.
Update: my use case is mainly to run tests at CI, but overriding default CRA Jest parameters is something I'm generally wondering about.
I'm running tests using the Jest, config that came with Create React App. It always launches into the interactive mode:
› Press a to run all tests.
› Press o to only run tests related to changed files.
› Press p to filter by a filename regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
But I don't want it to wait for my input. I want it to run once and then terminate. I tried using the --bail or --no-watchman switches but it still launches in interactive mode.
If I globally install jest, and run it in the root of my project, it executes once and finish (just as I want). But when I run npm test which runs react-scripts test, it goes into the watch mode even when I'm not passing --watch.
Update: I've also filed an issue on CRA.
You should use Jests --watchAll=false flag.
eg:
npm test -- --watchAll=false
Note: this is for react-scripts > 3.00
For older versions:
react-scripts >= 2.1.4 < 3.00
For non-ci, eg running tests locally, you can pass a --no-watch flag:
npm test --no-watch
react-scripts <= 2.1.3
CRA looks for a CI environment variable, if its present it doesn't run in watch mode.
CI=true npm test should do what you are looking for
See the User Guide -> Running Tests -> On your own environment
In your package.json scripts:
"test": "react-scripts test --watchAll=false"
Or npm test -- --watchAll=false
Or yarn test --watchAll=false
Note: the flag used to be called --no-watch in react-scripts < 3.0: https://github.com/facebook/create-react-app/blob/3.x/CHANGELOG.md#remove---no-watch-flag
non-interactive solution:
npm test a --watchAll=false
or
yarn test a --watchAll=false