Skip to main content

JU (Jest Utils)

import { JU } from '@dr.pogodin/react-utils';

The JU module (short for Jest utilities) provides helpers useful in Jest tests.

Beware

The JU module is exported and functional only within the development, Jest environment.

E2eSsrEnv​

Although it is not exported from this module for technical reasons, E2eSsrEnv class implements Jest environment for end-to-end testing of SSR and client-side execution of Webpack-built code with Jest, and thus should be considered as a very important part of Jest-testing utilities provided by the library.

Methods​

  • act() - An alias for the act() function from react-dom/test-utils.
  • getMockUuid() - Generates a mock UUID (formats the given seed into an UUID-formatted string).
  • mockClientSide() - Tricks react-utils into thinking the test is running within the client-side (browser) environment.
  • mockTimer() - Advances mock timers, and mock date by the specified time step.
  • mount() - Mounts scene to the DOM, and returns the root scene element with .destroy() method attached.
  • render() - Renders ReactJS component into JSON representation of the component tree.
  • shallowRender() - Generates a shallow render of ReactJS component.
  • shallowSnapshot() - It does a shallow snapshot test of the given ReactJS component.
  • simulate - An alias for Simulate from react-dom/test-utils.
  • snapshot() - Does does a snapshot test of the give ReactJS component, and also returns JSON representation of is render.
  • unmockClientSide() - Reverts the effect of previous mockClientSide() call.

act()​

JU.act(action)

This method is just an alias for act() function from react-dom/test-utils.

getMockUuid()​

JU.getMockUuid(seed) => string

Generates a mock UUID by determenistically transforming the given seed into a UUID-formatted string.

Arguments

  • seed - number - Defaults 0.

Returns

  • string - Mock UUID.

mockClientSide()​

JU.mockClientSide()

Tricks react-utils library into thinking the test is running within the client-side (browser) environment.

mockTimer()​

JU.mockTimer(time) => Promise<>

Advances mock timers, and mock date by the specified time step.

Arguments

  • time - number - The time step [ms].

Returns

  • Promise - Resolves once all async operations triggered by the mock time advance have completed.

mount()​

JU.mount(scene) => HTMLElement

Mounts scene to the DOM and returns the root scene element (DOM node) with .destroy() method attached, which unmounts the scene from DOM.

Arguments

  • scene - React.ReactNode - The scene.

Returns

  • HTMLElement - The root DOM element of the mounted scene with .destroy() method attached.

render()​

JU.render(component) => object

Renders provided ReactJS component into JSON representation of the component tree, using react-test-renderer.

Arguments

  • component - React.Node - ReactJS component to render.

Returns

  • object - JSON representation of the rendered tree.

Example

import { JU } from '@dr.pogodin/react-utils';

const tree = JU.render(<div>Example</div>);

shallowRender()​

JU.shallowRender(component) => object

Generates a shallow render of given ReactJS component, using react-test-renderer/shallow and returns the result.

Arguments

  • component - React.Node - ReactJS component to render.

Returns

  • object - JSON representation of the rendered shallow component tree.

Example

import { JU } from '@dr.pogodin/react-utils/jest-utils';

const tree = JU.shallowRender(<div>Example</div>);

shallowSnapshot()​

JU.shallowSnapshot(component) => object

Does a shallow snapshot test of the given ReactJS component, and also returns JSON representation of the rendered shallow component tree. Under the hood it uses shallowRender() to generate the render, then executes expect(RENDERED_TREE).toMatchSnapshot(), then returns RENDERED_TREE as the method result.

Arguments

  • component - React.Node - ReactJS component to render.

Returns

  • object - JSON representation of the shallow render.

Example

import { JU } from '@dr.pogodin/react-utils/jest-utils';

test('A snapshot test', () => {
  JU.shallowSnapshot(<div>Example</div>);
});

simulate()​

JU.simulate

This is an alias for Simulate object from react-dom/test-utils, which helps to emulate DOM events.

snapshot()​

JU.snapshot(component) => object

It does a snapshot test of the given ReactJS component, and also returns JSON representation of the rendered component tree. Under the hood it uses render() to render the component, then executes expect(RENDERED_TREE).toMatchSnapshot(), then retuns RENDERED_TREE as the method output.

Arguments

  • component - React.Node - ReactJS component to test.

Returns

  • object - JSON render of the componet.

Examples

import { JU } from '@dr.pogodin/react-utils/jest-utils';

test('A snapshot test', () => {
  JU.snapshot(<div>Example</div>);
});

unmockClientSide()​

JU.unmockClientSide()

Reverts the effect of previous mockClientSide() call.