Vitest mock jQuery
Vitest is a new testing framework for JavaScript. It is fast and easy to get started when you have used JavaScript testing frameworks like jest before! Currently, it is still in beta, but I think it is already awesome!
My goal was to mock jQuery for my tests, but use its real implementation, since lots of my code relies on convenient functions like callbacks.
Mocking jQuery inside your tests is not an easy task! It took me multiple hours to figure out how to do It. I have gone through all the examples provided in the vitest documentation.
I have also tried to accomplish it following answers from jest, but none of them worked out as expected. Furthermore, I always ended up with null errors when my test code tries accessing jQuery functions. I thought about what does jQuery needs to work? A window! How can I build a Window in my node env?
With JsDom! So let's get into it!
How to set up JSdom in Vitest
To install JSDom run
npm i jsdom
Next, we need to tell vitest to use JSDom, this happens in the test section of your vite.config.js.
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
createVuePlugin(),
],
resolve: {
alias: [
{
find: "@",
replacement: path.resolve(__dirname, "src"),
},
],
},
test: {
environment : "jsdom", // or 'node'
},
});JSDom is now ready To Use. Up next, we are going to use JSDom to mock jQuery in Vitest.
If you also work with canvas, please make sure to run:
npm rebuild canvas --update-binary
To make the node canvas work with > node 14 which is required for vite.
Otherwise, you will get the error:
Module did not self-register: '...\node_modules\canvas\build\Release\canvas.node'
How to mock window and jQuery in Vitest?
- Import JSDom into your test.
- Create a DOM instance
- Get the window of your instance
- Use the jQuery module with your window
var jsdom = require("jsdom");
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
var window = dom.window;
var $ = require("jquery")(window);
expect($).to.be.not.undefined;That's It! Now you can use the actual jQuery implementation in your tests and also inside your SUT.
That's it.
Conclusion
Mocking is sometimes hard, but once you got it, there are mostly some lines of code to handle everything! You just need to get the basic concepts and think around the edge about why simple mocking sometimes just does not work and how to set up everything properly as we did in this article.
I hope I could provide you with some value with this article. If you want to support me and the work I'm doing, you can buy me a coffee.
Happy testing,
Alex