Discussion on: Use Jest write unit testing for DOM manipulation

[Anthony Leotta]

is there any way to unit test the following? addTodo is not found.

document.body.innerHTML =
<input id="newTodoInput" />
<button id="addTodoBtn" onclick="addTodo()">Add todo</button>
<ol id="todoList"></ol>
;

I wrote this:

test('Check addTodo able add todo to todoList', () => {
document.body.innerHTML =
<input id="newTodoInput" />
<button id="addTodoBtn">Add todo</button>
<ol id="todoList"></ol>
;

const newTodoInput = document.getElementById('newTodoInput');
const addTodoBtn = document.getElementById('addTodoBtn');
addTodoBtn.addEventListener('click', addTodo);
const todolist = document.getElementById('todoList');
newTodoInput.value = 'New todolist!';
addTodoBtn.click();
expect(todolist.innerHTML).toBe('<li>New todolist!</li>');
});

which does work.