Testing
React.js
React.js
Main motivation
* Ship with confidence
Sanity / regression
* CI / CD
Automated process
* Accountability
Correlating feature tickets to bug issues and bug fixes
* Documentation
Demonstrate how your code can and should be used
* More unit tests == less QA
Shorter development cycles
React.js
Top level testing categories
* Manual tests
Test interactions in various use cases manually (takes longer & cost more)
* Automated tests
Checks your code features by running it in various use case scenarios
* Static Analysis
Checks your code without running it - eslint & Typescript
React.js
Automated tests
* Unit tests
Individual components and functions
* Integration tests
Test a group of components
* End-to-end tests
Test the entire system in various use-case scenarios
* Load / Stress / performance testing
Test the system behaviour under certain conditions
React.js
Unit testing
* Pure logic
Pure functions - both sync and Async code
* Stateful logic
+React update cycle - custom hooks - sync / async
* UI tests
Test the generated UI elements + interactivity
* Snapshots testing
Validate the UI didn't change after integrating new features
What do we actually want to test?
React.js
What kind of Tools do we need?
* a framework to run our tests
Run tests, setup & teardown, timeout configuration etc...
* Assertions vocabulary
Provide a language API to write our actual tests assertions
* Mimic DOM & events
Virtual DOM & user interaction simulations
* Mocking
Mock the unit external dependencies I/O
* Test coverage
How much of our code base is covered by tests
React.js
Testing frameworks
* Mocha Used to be the most popular, big ecosystem
* Jasmine Similar to mocha, less popular
* Jest The dominant tool for JS testing
* Ava Used to be the future, run tests in parallel
* Tape lean, tiny, simple & minimal configuration
compare on npm trends
* vitest Same jest api. faster. easier to config.
React.js
Assertion libraries
* Chai
React.js
Mimic DOM & events
* Enzyme
React Native Specific
React.js
Mocking
* sinon.js
* Jest
the unit external dependencies
Functions & modules
Mock network response
* Nock
* MSW
* Mirage
* Mockaroo
* Faker
Generate dummy data
React.js
Test coverage
* Included in Jest
React.js
Demo time!
Unit Testing React.js
By Yariv Gilad
Unit Testing React.js
- 453