git clone <repo>
# install dependencies
npm i
# run and view application ui in browser
npm run start
# run and view test output 
npm run test
# create snapshot test
npm test -- -u

• getByLabelText to select elements via aria-label
• fireEvent.change to simulate change events - accepts an event object
• container.firstChild is the DOM tree of the component and can be used in snapshot testing
• getByPlaceholderText to select via input placeholder
• document.activeElement is the same DOM node returned by the getter
• Before setting up your test suites, you should use afterEach(cleanup) (after imports) in order to unmount any React trees that were mounted with render

Create two tests for the FocusInput component.

• The first test should handle matching snapshot content.

  • Set a rendered ChangenInput to a deconstructed container.
  • Verify that the first instance of the component in the container matches the populated snapshot.

• The second test should emulate properly focusing input following a button trigger.

  • Set a rendered ChangenInput to a deconstructed getByPlaceholderText and getByText.
  • Simulate a click event on button text "Click to Focus". Verify that the active element within the document has the text "Focus me!"

Create a single test for the ChangeInput component.

• The test should handle displaying the correct greeting.
  • Set a rendered ChangenInput to a deconstructed getByLabelText and getByTestId.
  • Set input variable to label text "user-name".
  • Set greeting variable to ID "change-input-greeting".
  • Assert that expected input value should be empty.
  • Assert that expected greeting text should be "Welcome, Anonymous User!" Simulate a change input event where text value is changed.
  • Verify that the changed input value text is as expected.
  • Verify that the greeting text has replaced "Anonymous User" with the changed input value.

Notice that the FocusInput component test directory has a new directory called __snapshots__.

This file is a fully rendered version of the component with html elements and other details. Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. It helps you determine whether the output continues to behave as expected or not. This is a very useful testing method as there are higher chances that something will break as you revisit your code to make updates over time.

In your __tests__ directory, create a __snapshots__ directory. When you are testing with the intention to populate a new snapshot (or update an existing snapshot file), run npm test -- -u. If there is no existing snapshot for that test, it will populate a new file in the __snapshots__ directory. If snapshot test files already exist, this command will update the snapshot content if there were any recent changes made to its respective component.