Type alias OptionsType<Queries, Callbacks, Properties, Hooks>

Type declaration

• Optional callbacks?: {
      [Key in keyof Callbacks & string]: [Callbacks[Key][0], Callbacks[Key][1]]
  }

  And object whose values is tupples of keys of queries and names of props that contains callbacks

  const render = create(Component, defaultProps, {
    queries: {
      fooButton: {
        component: 'button',
        className: 'foo',
      },
    },
  
    callbacks: {
      onFooClick: ['fooButton', 'onClick'],
    },
  });
  
  const engine = render({});
  
  page.getCallback('onFooClick')({} as MouseEvent);
  Copy

• Optional getMockArguments?: (<Fn>(fn, callIndex) => Parameters<Fn>)

  • • <Fn>(fn, callIndex): Parameters<Fn>

    • Get arguments of called function by index using test engine

      Type Parameters

      • Fn extends ((...args) => any)

      Parameters

      • fn: Fn

        mocked function

      • callIndex: number

        index of call

        import { vi } from "vitest";
        
        const render = create(Component, defaultProps, {
          // ...
          getMockArguments: (fn, callIndex) => {
            return vi.mocked(fn).mock.calls[callIndex];
          },
        });
        Copy

      Returns Parameters<Fn>

• Optional hookDefaultValues?: Partial<{
      [Key in keyof Hooks]: ReturnType<Hooks[Key]>
  }>

  Mocked returns of hooks by default

  import { vi } from "vitest";
  
  const render = create(Component, defaultProps, {
    queries: {},
    hooks: {
      firstState: useState,
      secondState: useState,
      someCallback: useCallback,
      someEffect: useEffect,
    },
    hookOrder: [
      "firstState",
      "someCallback",
      "someEffect",
      "secondState",
    ],
    hookDefaultValues: {
      firstState: [0, vi.fn()],
      secondState: [false, vi.fn()],
      someCallback: vi.fn(),
    },
  });
  Copy

• Optional hookOrder?: readonly (keyof Hooks)[]

  Order of calling of hooks

  function Component() {
    const [counter, setCounter] = useState(0);
  
    useEffect(() => {
      setCounter(3);
    }, []);
  
    // ...
  }
  
  const render = create(Component, defaultProps, {
    queries: {},
    hooks: {
      counter: useState,
      someEffect: useEffect,
    },
    hookOrder: [
      "counter",
      "someEffect",
    ],
  });
  Copy

• Optional hooks?: Hooks

  An object whose values is hooks that called in current component, and keys can be used to access them

  import { vi } from "vitest";
  
  const render = create(Component, defaultProps, {
    queries: {},
    hooks: {
      firstState: useState,
      secondState: useState,
      someCallback: useCallback,
      someEffect: useEffect,
    },
    hookOrder: [
      "firstState",
      "someCallback",
      "someEffect",
      "secondState",
    ],
  });
  
  const engine = render({}, {
    firstState: [0, vi.fn()],
    someCallback: vi.fn(),
  });
  Copy

• Optional mockFunctionValue?: (<Fn>(fn, value) => void)

  • • <Fn>(fn, value): void

    • Mock function return using test engine

      Type Parameters

      • Fn extends ((...args) => any)

      Parameters

      • fn: Fn

        function for mock

      • value: unknown

        mocked value

        import { vi } from "vitest";
        
        const render = create(Component, defaultProps, {
          // ...
          mockFunctionValue: (fn, value) => {
            vi.mocked(fn).mockReturnValueOnce(value);
          },
        });
        Copy

      Returns void

• Optional properties?: {
      [Key in keyof Properties & string]: [Properties[Key][0], Properties[Key][1]]
  }

  An object whose values is tupples of keys of queries and names of props of components found by queries

  const render = create(Component, defaultProps, {
    queries: {
      content: {
        component: 'div',
        className: 'foo',
      },
    },
  
    properties: {
      contentChildren: ['content', 'children'],
    },
  });
  
  const engine = render({});
  
  const contentChildren = page.getProperty('contentChildren');
  Copy

• queries: {
      [Key in keyof Queries]: AccessorParamsType<Queries[Key]>
  }

  An object whose values is queries to rendered elements, and keys can be used to access them

  const render = create(Component, defaultProps, {
    queries: {
      fooButton: {
        component: 'button',
        className: 'foo',
      },
    },
  });
  
  const engine = render({});
  
  const fooButtonProps = page.accessors.fooButton.getProps();
  Copy