Testing what isn't there

Up until this point, we have been writing tests and assertions to make sure that things are displayed correctly. For instance, the should append new items to the bottom of the list test makes sure that our todos are listed in the correct order and that the todo count text is correct.

This is all well and good, but it is also important to write tests to ensure that things are not shown when they are not supposed to be. So, in addition to testing the positive case, make sure also to test the negative.

This will make more sense when we write our first "negative" test. For instance, when a todo is added to the application, a <footer> is appended to the bottom of the app. When there are no todos, the <footer> is removed.

Let's write a test to ensure that the <footer> is not visible to our users when there are no todos.

it("does NOT display the footer when there are no todos", () => {})

Now let's grab the <footer> element and write an assertion that it does not exist when there are no todos.


Great, our test is passing. Let's also think of some other elements that should not exist when there are no todos.

Another element that should not exist is our .todo-list element. Let's write another assertion to ensure that this does not exist if there are no todos.


Since we are now checking for multiple elements, let's update our test name to be more explicit.

it("does NOT display the footer or todo-list when there are no todos", () => {


For additional practice checkout the cypress/integration/practice/practice.spec.js file in the TodoMVC repo. This file contains several tests, with helpful comments, to help you put into practice all of the concepts you have learned so far.

Should you get stuck or need some help, all of the answers are provided within cypress/integration/final/practice.spec.js

Wrap Up

Congrats! You have finished the first course of Real World Testing with Cypress. In the next course you will learn all of the fundamentals you need to write great tests.