Instructor: Here, we have a simple list application from a previous lesson. It allows us to add items and reset the items, if required. The behavior of this application is described by the application state class. In order to test the application behavior, we can go a long way by simply testing that the app state behaves as expected.
We already have Jest set up using the standard Typescript Jest process. We have a script target to run Jest. Installation was a simple npm install of the types, Jest, Jest itself, and ts-jest.
We've also configured Jest with the simple copy-paste of jest.config.js from our Typescript React course. Now, let's go ahead and add a test for the app state. You will test all the features that are provided by app state in individual tests.
We create a test file. Bring in the singleton app state. Before each test, you will go ahead and reset the app state to its initial state. To test that it is going to store a list of items, we simply check the initial items to be an empty array.
Next, to allow maintaining a current string as it gets typed, we check that the initial value is an empty string. Then, we simulate a user type of character A, and ensure that the current item updates.
Next, we type another character to make the value AB, and ensure that the current item updates accordingly. To test the ability to add this current string to the list of items, we will go ahead and change the current item to some value and add it to the list.
We expect the list to contain this item. For the option to reset the items in the current string, we simply add a current item to the list. We then reset the app state and expect the initial conditions.
A neat feature of Jest is built in coverage support that you can activate with the minus minus coverage flag. You can see that our tests cover 100 percent of the application state behavior.