vitest-canvas-mock

What is vitest-canvas-mock?

The vitest-canvas-mock npm package is a mock implementation of the HTMLCanvasElement for use with the Vitest testing framework. It allows developers to test canvas-related code without needing a real browser environment.

What are vitest-canvas-mock's main functionalities?

Mocking Canvas Methods

This feature allows you to mock canvas methods such as getContext, fillRect, and toDataURL. This is useful for testing drawing operations without needing a real canvas element.

const { createCanvas } = require('vitest-canvas-mock');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
console.log(canvas.toDataURL());

Mocking Canvas Properties

This feature allows you to mock canvas properties like width and height. This is useful for testing how your code interacts with canvas dimensions.

const { createCanvas } = require('vitest-canvas-mock');
const canvas = createCanvas(200, 200);
canvas.width = 300;
canvas.height = 300;
console.log(canvas.width, canvas.height);

Mocking Image Loading

This feature allows you to mock image loading, which is useful for testing code that relies on images being loaded into the canvas.

const { createImage } = require('vitest-canvas-mock');
const img = createImage();
img.src = 'data:image/png;base64,...';
img.onload = () => {
  console.log('Image loaded');
};

Other packages similar to vitest-canvas-mock

jest-canvas-mock

jest-canvas-mock is a similar package designed for use with the Jest testing framework. It provides a mock implementation of the HTMLCanvasElement and its methods. Compared to vitest-canvas-mock, jest-canvas-mock is tailored for Jest users, while vitest-canvas-mock is specifically designed for Vitest.

canvas-mock

canvas-mock is a general-purpose canvas mocking library that can be used with various testing frameworks. It provides a comprehensive mock of the HTMLCanvasElement and its methods. While it is more versatile in terms of framework compatibility, it may require more setup compared to vitest-canvas-mock, which is optimized for Vitest.

README

vitest-canvas-mock

Mock canvas when running unit tests with vitest. Uses jest-canvas-mock.

Install

npm install vitest-canvas-mock -D

Usage

1. Create a new setup file that imports vitest-canvas-mock or add it to an existing setup file.

// vitest.setup.ts
import 'vitest-canvas-mock'

1. In your vitest.config.ts file, create a setupFiles array and add that file:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
    environment: 'jsdom',
    deps: {
      inline: ['vitest-canvas-mock'],
    },
    // For this config, check https://github.com/vitest-dev/vitest/issues/740
    threads: false,
    environmentOptions: {
      jsdom: {
        resources: 'usable',
      },
    },
  },
})

Mock Strategy

View mock strategy doc here.

Snapshots

View snapshots doc here

License

MIT