Build test to custom hooks created with Atomico with an isolated instance and predictable

The "atomico/test-hooks" submodule is a direct part of Atomico's core and will allow you to run the customHook in a controlled way without the need for webcomponents.

import { createHooks } from "atomico/test-hooks";


function that creates an isolated context that is shared globally with Atomico hooks when executing the load method


const hooks = createHooks(opcionalRender, opcionalHost);


  • optionalRender: Callback that allows restarting the hook's life cycle, this callback will be executed every time a hook like useState or useReducer requests the scope update, Atomico uses it to render the webcomponent again.

  • opcionalHost: allows to share an object for the hook useHost, Atomico uses it to share the instance of the webcomponent.

Return of the instance

interface Hooks {
  load<T>(callback: () => T): T;
  clearEffect(unmounted?: boolean): () => ()=> void;


  • load: Function that allows to load the hooks to the temporary global context of Atomico.

  • clearEffect: Function that activates the collector of useLayoutEffect, when executing clear Effect a callback will be returned that allows ending the collector for useEffect, closing the cycle of secondary effects.

    If clear Effect receives true as parameter, it communicates the unmounted.


./use-counter.js: customHook to test.

import { useState } from "atomico";

export function useCounter(initialValue) {
  const [value, setValue] = useState<number>(initialValue);
  return {
    increment: () => setValue((value) => value + 1),
    decrement: () => setValue((value) => value - 1),

./use-counter.test.js: The example is based on the test environment from @web/test-runner.

import { expect } from "@esm-bundle/chai";
import { createHooks } from "atomico/test-hooks";
import { useCounter } from "./use-counter.js";

it("Check return", () => {
  const hooks = createHooks();

  const counter = hooks.load(() => useCounter(10));


Last updated