Mockable React render function

[stalniy]

Summary

This document aims to improve testability of React components by introducing additional prop which represents all used child components. This makes it possible to mock those chlid components without using jest.mock and relying on module paths

Motivation

jest.mock is kind of hack that allows to mock nodejs modules in commonjs written code. There are few issues with this approach:

1. It requires test to know child component paths what may result in issues if we decide to move those components around during refactoring. Or if we change the code in the way, that child component is no longer used by testing component, what will result in useless jest.mock call if developer forgets to remove it. There is no tool that will help us to identify whether that component is used in render function or not
2. jest.mock cannot be called in test and instead we need to create shared spy and modify/reset it in every test
3. This discourages usage of DI container and this leads to less testable code

Example

jest.mock approach

jest.mock('@src/components/layout/Layout');
jest.mock('@src/components/shared/CustomNextSeo');
jest.mock('@src/components/provider/ProviderDetailLayout');
jest.mock('@src/components/shared/DynamicReactJson');

describe(ProviderRawData.name, () => {
  it("renders", async () => {
    const provider = buildProvider();
    render(<ProviderRawData owner="..." />)
  });
});

Testable component

In order for component's render function to become mockable, we need to introduce additional prop on it which will allow us to provide custom child component implementations in unit tests:

import { DynamicReactJson } from "@src/components/shared/DynamicJsonView";
import Layout from "../layout/Layout";
import { CustomNextSeo } from "../shared/CustomNextSeo";
import ProviderDetailLayout, { ProviderDetailTabs } from "./ProviderDetailLayout";

export const COMPONENTS = {  // <------
  Layout,
  CustomNextSeo,
  ProviderDetailLayout,
  DynamicReactJson
};

type Props = {
  owner: string;
  components?: typeof COMPONENTS;  // <------
};

export const ProviderRawData: React.FunctionComponent<Props> = ({ 
   owner, 
   components: c = COMPONENTS,   // <------
}) => {
  // logic

  return  <c.Layout isLoading={isLoadingLeases || isLoadingProvider || isLoadingStatus}>
      <c.CustomNextSeo title={`Provider raw data for ${owner}`} url={`${domainName}${UrlService.providerDetailRaw(owner)}`} />
      <c.ProviderDetailLayout address={owner} page={ProviderDetailTabs.RAW} refresh={refresh} provider={provider as ClientProviderDetailWithStatus}>
        {provider && <c.DynamicReactJson src={JSON.parse(JSON.stringify(provider))} collapsed={1} />}
      </c.ProviderDetailLayout>
    </c.Layout>
});

And its test

import { COMPONENTS, ProviderRawData } from "@src/components/providers/ProviderRawData";

describe(ProviderRawData.name, () => {
  it("renders", async () => {
    const components = mockComponents(COMPONENTS); // <-- `mockComponents` is a helper function, converts every child component into spy which just renders children in React.fragment
    const provider = buildProvider();
    render(<ProviderRawData owner="..." components={components} />);

    expect(components.Layout).toHaveBeenCalled();
    expect(components.CustomNextSeo).toHaveBeenCalled();
    expect(components.ProviderDetailLayout).toHaveBeenCalledWith(expect.objectContaining({ address: provider.owner, provider }), {});
    expect(components.DynamicReactJson).toHaveBeenCalledWith(expect.objectContaining({ src: JSON.parse(JSON.stringify(provider)) }), {});
  });

Main benefits

• testable render function without jest.mock
• test doesn't know child components' paths which may change during refactoring
• changes in render function won't be left unnoticeable, if developer removes child component and provides its mock in tests then TS will fail based on types
• no shared test between tests which may be not reset
• the actual component implementation is only slightly differs from the one which is not testable

Drawbacks

• supportive code