React Testing and Deployment (with AWS!) - 401-advanced-javascript-aimurphy/seattle-javascript-401n13 GitHub Wiki
Rendering, Testing, Deployment, OH MY!
Shallow Rendering API
Good for isolating tests on a specific component and not its children
more on that here*
*these are all gonna be from airbnb enzyme
Static Rendering API
generates a static HTML based off of your React tree, then analyze--I think. English comprehension is hard.
more on that over here (^that same place again)
Full DOM Rendering API (mount(...))
test them all--but you'll need a browser-like environment AND this type of rendering actually mounts to the DOM so tests on the same DOM will affect each other. Use .unmount() to clean up if need be.
more on all of that here~
Snapshot Test w/ Jest
Prevent unexpected UI changes by using this test! Like taking a picture, then laying another picture over it and looking for the discrepancies:
The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.
Snapshot ground rules from Jest:
1. Treat snapshots as code
Commit snapshots and review them as part of your regular code review process. This means treating snapshots as you would any other type of test or code in your project.
Ensure that your snapshots are readable by keeping them focused, short, and by using tools that enforce these stylistic conventions.
As mentioned previously, Jest uses pretty-format to make snapshots human-readable, but you may find it useful to introduce additional tools, like eslint-plugin-jest with its no-large-snapshots option, or snapshot-diff with its component snapshot comparison feature, to promote committing short, focused assertions.
The goal is to make it easy to review snapshots in pull requests, and fight against the habit of simply regenerating snapshots when test suites fail instead of examining the root causes of their failure.
2. Tests should be deterministic
Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data.
For example, if you have a Clock component that uses Date.now(), the snapshot generated from this component will be different every time the test case is run. In this case we can mock the Date.now() method to return a consistent value every time the test is run:
Date.now = jest.fn(() => 1482363367071);
Now, every time the snapshot test case runs, Date.now() will return 1482363367071 consistently. This will result in the same snapshot being generated for this component regardless of when the test is run.
3. Use descriptive snapshot names
Always strive to use descriptive test and/or snapshot names for snapshots. The best names describe the expected snapshot content. This makes it easier for reviewers to verify the snapshots during review, and for anyone to know whether or not an outdated snapshot is the correct behavior before updating.
There's always more--the link in the header takes you to more ☝️❤️