Big Testing in React

Tests come in two sizes: Big and Small. Whereas a small test draws a short perimiter around a single component or group of components and validates the edge cases they contain, a big test incorporates as much of the actual system as possible, making sure that it works in harmony together.

Today, the React ecosystem has many high quality tools for writing small tests. That is, if we have a single component, we can achieve a high degree of certainty that it will work as expected in isolation. Alas, if only our users could use those same components in isolation, we wouldn't need to seek anything further! But they don't do they? They use them on different pages, apps, browsers, devices, and operating systems. They use them with real mice, and real keyboards to talk to real network services.

This talk will show you how to write big tests that measure your React code in a high-fidelity environment that simulates actual user interaction with your entire application. But big doesn't need to mean hard, nor does it need to mean brittle or slow. Done right, big tests are eaiser to write, resilient to change, and plenty fast.

Transcript

1. @cowboyd Hi!
2. @cowboyd Unit Testing is a Myth
3. @cowboyd What is a Test?
4. @cowboyd Guarantor of Quality What is a Test?
5. @cowboyd Guide to Design What is a Test?
6. @cowboyd Support Refactoring What is a Test?
7. @cowboyd Test Engineering 5 factor tests* What is a Test? *https://www.devmynd.com/blog/five-factor-testing/
8. @cowboyd Test Science What is a Test?
9. @cowboyd Experiment
10. @cowboyd Unit Experiment it('simulates click events', () => {
 const onButtonClick = sinon.spy();
 const wrapper = shallow((
 <Foo onButtonClick={onButtonClick} />
 ));
 wrapper.find('button').simulate('click');
 expect(onButtonClick).to.have.property('callCount', 1);
 });
11. @cowboyd Small Hypothesis A component: • with no parent • with no children • with no external state management (Redux) • with no external sequencer (saga, observable) • running in nodejs • using a simulated DOM • using simulated events Properly dispatches a handler
12. @cowboyd Big Hypothesis A user on a Microsoft Surface can upgrade their the premium subscription with a single click on their settings page.
13. @cowboyd Big vs Small.
14. @cowboyd Big Testing
15. @cowboyd React Today small testing
16. @cowboyd Why not Big Testing?
17. @cowboyd Big Testing is Hard • cumbersome to setup end to end • non-repeatable state management • headaches dealing with asynchrony • coordination with external services
18. @cowboyd Test Engineering
19. @cowboyd Big Testing in React
20. @cowboyd Real Browsers
21. @cowboyd Jest nope. Real Browsers
22. @cowboyd Nightmare nope. Real Browsers
23. @cowboyd Karma https://karma-runner.github.io Real Browsers
24. @cowboyd Karma + BrowserStack Real Browsers
25. @cowboyd Network
26. @cowboyd Slow, Flaky or is it? Network
27. @cowboyd Mirage Server Network
28. @cowboyd Transport, Serialization Network: Mirage Server
29. @cowboyd Factories. Fake Data. Network: Mirage Server
30. @cowboyd Mirage Server Network
31. @cowboyd Asynchrony
32. @cowboyd Asynchrony GOOD Cause Effect time assertion
33. @cowboyd Asynchrony Cause Effect time assertion BAD
34. @cowboyd Convergent Assertions Asynchrony
35. @cowboyd Pure Assertions Asynchrony *gluten free, with 0 side-effects
36. @cowboyd describe("selecting a package title to add to my holdings", function() {
 beforeEach(function() {
 ResourcePage.toggleIsSelected();
 });
 it('reflects the desired state (YES)', function() {
 expect(ResourcePage.isSelected).to.equal(true);
 });
 );
37. @cowboyd Asynchrony BEST Cause Effect time assertions
38. @cowboyd Convergent Assertions Asynchrony Fast!!
39. @cowboyd Demo
40. @cowboyd React: Big Testing https://github.com/cowboyd/react-acceptance-testing https://github.com/thefrontside/ui-eholdings
41. @cowboyd http://frontside.io we’re hiring