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 viaaria-label
fireEvent.change
to simulate change events - accepts anevent
objectcontainer.firstChild
is the DOM tree of the component and can be used in snapshot testinggetByPlaceholderText
to select via inputplaceholder
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 deconstructedcontainer
. - Verify that the first instance of the component in the container matches the populated snapshot.
- Set a rendered
-
The second test should emulate properly focusing input following a button trigger.
- Set a rendered
ChangenInput
to a deconstructedgetByPlaceholderText
andgetByText
. - Simulate a click event on button text "Click to Focus". Verify that the active element within the document has the text "Focus me!"
- Set a rendered
Create a single test for the ChangeInput component.
- The test should handle displaying the correct greeting.
- Set a rendered
ChangenInput
to a deconstructedgetByLabelText
andgetByTestId
. - 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.
- Set a rendered
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.