If you have an application that has HTML imports like this import template from './my-component.html and then attempt to test this code in Jest 28+ (or previous versions, for that matter), you will get a syntax error similar to this one:
SyntaxError: Unexpected token ‘<’ HTML
Fortunately, there is an easy fix. Firstly, you need to install the package jest-html-loader. npm install jest-html-loader -D. Then you need to configure your Jest configuration as follows.
When it comes to mocking dependencies in Jest, it couldn’t be easier. You can create an actual mock module that gets loaded in place of the dependency in your app or you can do it manually by mocking the implementation or module.
import { SomeClass } from './some-file'; // Mock the uuid module and v4 method jest.mock('uuid', () => ({ v4: () => 'hjhj87878' })); describe('Test Case', () => { let sut; beforeEach(() => { sut = new SomeClass(); }); test('My Test', () => { expect(sut.returnUuid()).toReturn('hjhj87878'); }); }); For reference, our SomeClass implementation looks like this:
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.
When working with mocks and spies in Jest, it is quite easy to fall into a trap where they become stale (especially in cases where pure functions are not being used). Heading to the documentation for Jest yields a lot of similar-looking methods for restoring mocks, clearing mocks and resetting mocks.
This is where confusion sets in. What is the best practice? Which ones should I call to ensure my tests don’t have stale mocks or spies? Even I struggled with this aspect.
Recently whilst writing some unit tests in Jest, I had to test some code that took ISO date strings and converted them to formatted date strings, then code that converts them back to ISO strings before it’s sent to the server.
My first attempt was to use jest.mock and mock each individual method. For some of the uses of moment where simple dates are being converted, it is easy enough to mock format and other methods, but once you start chaining Moment methods, things get tricky from a mocking perspective.
Recently, I encountered an issue in Travis CI and my Aurelia application which uses Jest for the tests suite. I erroneously copied some older configuration code for Jest and used it in my Jest configuration, assuming it would work.
This error took a while to isolate and resolve. It was out of pure desperate that I accidentally discovered the fix. If I made the mistake, it is possible that you might as well. Does this sound familiar to you?