Code Coverage:
Code coverage is a metric in software development to measure how much code is tested.
More coverage, less the bug.
Statement coverage - how many statements in code have been executed for the test?
Branches coverage - how many control statements(e.g., if condition) have been executed for tests?
Function coverage - how many functions have been covered?
Line coverage - how many lines have been covered?
Let's hit the test!
To know coverage, we need to configure the scripts key in package.json,
Since we didn't change anything from the last commit, coverage is zero for all.
So we will run a coverage report irrespective of change/commit.
So add this in the scripts key,
Now you get some meaningful reports.
The red files have zero coverage because we didn't write any specific tests for those files. No need to cover those while running the report.
We will ignore those,
I created src/components and inserted all the test files and corresponding components.
--collectCoverageFrom='src/components/**/*.{js,jsx}'
Note: include 'jsx' or else it won't give correct coverage report
Let's see how to ignore files.
Add a simple Array.export.js file that exports an array in the Firsttest directory.
Note: Array.export.js is in red
So include this,
--collectCoverageFrom='!src/components/**/*.{sample}.{js,jsx}'
The coverage also creates a folder named 'coverage,' and inside there will be one report folder it contains 'index.html' and it look like this
Assertions and Matchers?
We do tests to verify the result.
To check the value meets the expected output.
Whether actual and expected are the same.
If not, the test fails.
With Jest, assertions are done using the 'expect' method.
'expect' method expects and value.
expect(value)
In general, it is always followed by the matcher function to assert something about the value.
You can find more matcher here in https://jestjs.io/docs/using-matchers
Like toBe,toEqual,toContain,etc
You won't find 'toBeInTheDocument' in the matcher function in the above link!
Because JEST is javascript testing framework and does not contain UI/DOM.
Jest DOM is needed for that
Jest DOM is already installed by CRA
You can check Jest DOM matchers here - https://github.com/testing-library/jest-dom
What to test?
Use Kent C Odds guidelines,
Test that component is rendered.
Test that component is rendered with props.
Test that component is working in different states.
Test that component is reacting to events.
What not to test?
Third-party package - like MUI components.
Implementation details.
Avoid testing code that is irrelevant to the end-user experience.
Continued...