I love using Jest to unit test my Aurelia applications. Sadly, one of the most popular options for mocking event listeners and simulating events called Enzyme is targeted at React applications and to my knowledge, does not work with Aurelia or any other framework like Angular.
If you are wanting to test events registered using addEventListener there is an easy way to mock them.
describe('My Test', () => {
let sut;
let events = {};
beforeEach(() => {
sut = new Dependency();
// Empty our events before each test case
events = {};
// Define the addEventListener method with a Jest mock function
document.addEventListener = jest.fn((event, callback) => {
events[event] = callback;
});
document.removeEventListener = jest.fn((event, callback) => {
delete events[event];
});
});
test('Test Keypress fires callback', () => {
// Watch the function that gets called when our event fires
jest.spyOn(sut, 'pressed');
// A method inside of our dependency that sets up event listeners
sut.setupEvents();
// Fire the keypress event
events.keypress({ key: 'Enter' });
// We fired an event, so this should have been called
expect(sut.pressed).toHaveBeenCalled();
});
});Inside of the beforeEach we do a few bootstrapping things before we run our tests. The sut variable is actually the thing we are testing. In this instance, Dependency is a class with some methods inside of it.
We populate our object which stores our events called events when addEventListener is called, our mocked version will be used, so we replicate how this would work in the browser, except we just use an object.
Inside of our test case, we are calling a method on our class called pressed here is what the dependency might look like:
export class Dependency {
setupEvents() {
document.addEventListener('keypress', this.pressed.bind(this), false);
}
pressed() {
// Called when keypress event is fired
}
}This approach works for a lot of other things you want to test and mock.
Worked a treat – thank you!
Silly question – what is `map` supposed to be?
@Joe
Not silly at all, and my apologies. The map was supposed to be `events` I have since fixed this up.
I don’t know why google search hardly mentions using the simplest callback method, I think the callback is the most direct and practical way to test the event
“`
q.on(‘done’, function (payload, job) {
try {
expect(q._pendingCount).toBeLessThanOrEqual(5)
const elapsed = performance.now() – start
expect(elapsed).toBeGreaterThanOrEqual(200 * Math.ceil((count + 1) / 5))
if (count++ >= 10) {
q.stop()
done()
}
} catch (err) {
q.stop()
done(err)
}
})
“`
I don’t understand this line:
sut = new Dependency();
What is it doing? Is “new Dependency()” something I would actually write in my code, or is it a placeholder?
I’m trying to do same but my eventlistener has click event and I’m getting this error TypeError: events.click is not a function. also I’m seeing you have call it with object events.keypress({ key: ‘Enter’ }); what argument will go with click ?