Jest

Jest sets NODE_ENV=test by default

The data entering a component via props is the data, whose stability we want to test during unit tests. For instance, if we have a <Table /> component, we are chiefly concerned with the data coming in and how it impacts <Table />. In this case, it would be: How long is the array of data that comes in (which ultimately translates to amount of rows)? What is the 'title' prop that we are expecting (which renders the title on the Table), etc. Given that the data is what we are interested in, begin to think of ways that data can fail on us. What happens if we get no data? Well, then I guess we expect the amount of <Row /> components to be 0. This would mean a passing test, meaning that paticular piece of logic is guarded, and will remain robust unless the test breaks.

Keep in mind we are forming our tests around: what is expected given this circumstance? In tests, an error case and happy-path are both equivalent in terms of value. They are simply scenarios that may happen, and we want to just clarify it for the record that "this is what should happen, given this circumstance."

  • ex. in const wrapper = shallow(<FeedbackSummary />);, imagine we are the parent, and FeedbackSummary is the child we are testing. In other words, FeedbackSummary is the input, and wrapper is the output. In jest, we are basically saying "hey FeedbackSummary, I'm going to give you some props and render you. The output will be called wrapper, and I will take my magnifying glass (aka enzyme library) and take a close look to ensure that the everything looks like it should"

Transformation

Jest runs our code as plain Javscript. That means that any part of our code that isn't plain js (e.g. jsx, TypeScript types) needs to be transformed into plain js.

Implementations

ts-jest: a Jest transformer with source map support allowing us to use Jest to test TypeScript code


Children
  1. Async Jest
  2. Cook
  3. Jest with TypeScript
  4. Mock
  5. Throw

Backlinks