repository·master·Indexed 26 days ago
https://github.com/capricorn86/happy-domA lightweight, headless JavaScript implementation of a web browser designed for high performance in testing environments and server-side rendering. It provides essential DOM APIs, including Custom Elements, Declarative Shadow DOM, Mutation Observer, Tree Walker, and the Fetch API. The project includes specialized packages such as @happy-dom/global-registrator for environment setup, @happy-dom/jest-environment for Jest integration, @happy-dom/node-canvas-adapter for canvas support via node-canvas, and @happy-dom/server-renderer for SSR and SSG.
Happy DOM is a JavaScript implementation of a web browser without a graphical user interface. It is designed for high performance in environments like testing and server-side rendering. Key supported DOM features include:
--env flag when running the jest command.Install the @happy-dom/server-renderer package as a development dependency to use Happy DOM for server-side rendering (SSR) or static site generation (SSG).
npm install @happy-dom/server-renderer --save-devInstall the @happy-dom/global-registrator package as a development dependency to enable registration of Happy DOM and facilitate test environment setup.
npm install @happy-dom/global-registrator --save-devTo use Happy DOM with Jest, install the environment package along with its required Jest dependencies as dev dependencies.
npm install @jest/environment @jest/fake-timers @jest/types @jest/mock @jest/util @happy-dom/jest-environment --save-devTo use the pluggable canvas adapter for Happy DOM with node-canvas, install both canvas and @happy-dom/node-canvas-adapter via npm.
npm install canvas @happy-dom/node-canvas-adapterIf you use a dedicated Jest configuration file (e.g., jest.config.js), set the testEnvironment property to @happy-dom/jest-environment.
{
"testEnvironment": "@happy-dom/jest-environment"
}You can pass Happy DOM Browser Settings to the Jest environment using the testEnvironmentOptions key in your Jest configuration. This allows you to customize properties like the url, viewport dimensions (width, height), and settings (such as navigator.userAgent).
{
"testEnvironment": "@happy-dom/jest-environment",
"testEnvironmentOptions": {
"url": "http://localhost",
"width": 1920,
"height": 1080,
"settings": {
"navigator": {
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
}
}
}
}To set the Happy DOM environment globally for your project, add the testEnvironment property to the jest object in your package.json file.
{
"jest": {
"testEnvironment": "@happy-dom/jest-environment"
}
}To use Happy DOM in your Jest tests, set happy-dom/jest-environment as your testEnvironment in your Jest configuration. This environment provides a Window instance and sets up global browser APIs within the Jest execution context.
You can pass options to the environment via testEnvironmentOptions in your Jest config. Supported options include:
settings: An object of type IOptionalBrowserSettings to configure the Happy DOM instance.customExportConditions: An array of strings to specify custom export conditions.console: A custom console implementation.To enable canvas support in a Happy DOM Window instance, import CanvasAdapter from @happy-dom/node-canvas-adapter and pass it to the canvasAdapter option within the settings object of the Window constructor. You can also optionally set enableImageFileLoading: true to support loading image files (e.g., for <img> elements).
import { Window } from 'happy-dom';
import { CanvasAdapter } from '@happy-dom/node-canvas-adapter';
const window = new Window({
settings: {
canvasAdapter: new CanvasAdapter(),
// Optionally, enable image file loading (e.g. for <img> elements)
enableImageFileLoading: true
}
});
const canvas = window.document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
// Now you can use canvas context
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
// Get data URL
const dataUrl = canvas.toDataURL();
// Output the data URL
console.log(dataUrl);