Reading Class 27: React Testing and Deployment - mwilkin-401-advanced-javascript/bend-javascript-401d2 GitHub Wiki

Enzyme is a JavaScript testing utility for React. It makes it easier to test component’s output. The output can be manipulated, traversed, simulate the runtime.

Shallow Rendering It is useful for testing a component as a unit It ensures that your tests aren't indirectly asserting on behavior of child components

Static Rendering It generates HTML from your React tree with the render function and analyze the resulting HTML structure.

Mount Rendering or Full Rendering Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or need to test components that are wrapped in higher order components. Requires that a full DOM API be available at the global scope. Unlike shallow or static rendering, full rendering actually mounts the component in the DOM, which means that tests can affect each other if they are all using the same DOM.

Snapshot Testing A useful tool whenever you want to make sure your UI does not change unexpectedly. Don’t need to build the entire app; this would take too long Create a small component to test which can quickly render and be tested. Subsequent tests are compared with previous snapshots: If the tests match, the test will pass If differences are found, either the test found a bug in the code or the implementation has changed and the snapshot needs to be updated.

Guide lines:
  1. Treat snapshots as code: ensure they are readable, focused and concise by using tools that enforce stylistic conventions.
  2. Tests should be deterministic: running a test on the same component should produce the same result each time.
  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 which makes it easier for reviewers to verify them.