This week, I was tasked with adding tests to my from my previous Cloud Computing for Programmers course, where I worked with Node.js, I decided to use it for this project as well. I started by writing some tests to check the functionality of my code. However, I encountered a few errors that I hadn’t faced before. After some debugging and searching through Stack Overflow, I realized that there are additional configurations required when using ESM (ECMAScript Modules) with Jest. In my previous project, I had used CommonJS, which worked perfectly. While I could have opted to use Babel for the conversion, Jest offered a new beta feature that allowed ESM to run directly. I decided to give it a try, and it worked great!
This explains everything related to configuring jest with ESM:
Here is a quick overview of the setup:
Install Jest:
npm install --save-dev jest
Create a jest.config.js file. Here I set what folders to ignore as well:
export default {
testPathIgnorePatterns: ["/node_modules/", "/examples"],
transform: {},
};
In the package.json scripts section, use the experimental argument for jest to work with ESM modules:
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
}
Create a test file. I created all the tests within a test folder in root directory. Here is a simple one I created:
import { readFile, checkIfDirectory } from "../src/fileUtils";
describe("File Utility", () => {
test("Read File", () => {
readFile("./examples/test.txt").then((data) => {
expect(data).toBe("Hello World");
});
});
test('should return true if the path is a directory', async () => {
const result = await checkIfDirectory('./examples');
expect(result).toBe(true);
});
});
If you want to test using a single test file:
npm test -- banner.test.js
For running all the tests, we use the script, we added earlier in package.json:
npm run test
Finally, the basic tests were set up. However, this was just the beginning of my troubleshooting journey. I also faced difficulties with mocking libraries and modules, especially since they were using ESM. These required extra configuration, but after some tweaking, I was able to get everything working, and the tests ran successfully.
Instead of using the regular jest.mock, you have to use jest.unstable_mockModule:
For example: await jest.unstable_mockModule("fs", () => ({
existsSync: jest.fn(),
readFileSync: jest.fn(),
}));
See (Mock Service Worker). Although it required a bit more setup to create a mock server, it worked flawlessly on the first try. I crafted an example response based on how the Gemini API would respond, which allowed me to test the refactored functionality.
Here is how the mock server was set up for reference:
import { http, HttpResponse } from 'msw'
export const handlers = [
http.post('https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent', () => {
return HttpResponse.json({
candidates: [
{
content: {
parts: [
{
text: JSON.stringify({
explanation: "The provided code has been refactored to address several issues and improve readability.",
refactoredCode: `
var count = 0;
var message = "Hello";
`
})
}
],
role: "model"
},
finishReason: "STOP",
index: 0
}
],
});
}),
];
You can see that I am mocking a specific API endpoint that I am using for the application. Now all you have to do this add the below to start the server while testing:
import { setupServer } from "msw/node";
import { handlers } from "../mocks/handler.js";
export const server = setupServer(...handlers);
server.listen();
Reflecting on the process, this was a great learning experience for me. In hindsight, I probably should have checked the compatibility of the libraries I was using and considered any potential issues beforehand. Despite the challenges, I’m glad to have reached a point where my tests are running smoothly. I look forward to adding more tests in the future and improving the overall stability of my project.
SOCIAL SHARE CARD GENERATOR