JSPatch is a library inspired by mock.patch from python. It leverages Jest code transformations in order to modify files under test so that we can dynamically patch arbitrary identifiers.

Say you have this component:

export function MyComponent() {
  const someContextState = useContext(SomeContext);
  const state = useDataProvider(someKey);

  switch (state.type) {
    case "loading":
      return <Loading />;
    case "case1":
      return <Case1 />;
    case "case2":
      return <Case2 />;
    default:
      return <Default state={someContextState} />;
  }
}

Before this library you would have to setup SomeContext and hook into the implementation of useDataProvider so that you can make it return data corresponding to the state you're trying to test.

Now instead you can dependency inject useDataProvider and useContext directly regardless of whether its part of a public module API.

it('renders the correct case', async () => {
  // Patch the hooks directly
  const unpatchDataProvider = __patch('src/components/MyComponent', 'MyComponent.useDataProvider', () => {
    return (key) => {
      return CASE_1_STATE;
    }
  });
  const unpatchSomeContext = __patch('src/components/MyComponent', 'MyComponent.useContext', () => {
    return (context) => {
      if (context === SomeContext) {
        return SOME_CONTEXT_STATE_FIXTURE;
      }
    }
  });
  
  // Render the component
  await act(() => {
    render(<MyComponent />
  });
  
  // Remember to unpatch for the next test!
  unpatchDataProvider();
  unpatchSomeContext();
  expect(screen.getByTestId("case1-component")).toBeVisible();
});

Installation

npm install jspatch

in jest.config.js add:

module.exports = {
  transform: {
    "^.+\\.[jt]sx?$": "jspatch",
  },
};

In your test file:

import jspatch from "jspatch";
const { __patch } = jspatch;


__patch("path/to/file", "component.useUserEmailHook", () => "[email protected]"

Note: For now, if you're using this library and are patching in multiple test files then you will need to either (1). Make your patches happen in a single file that is executed as part of jest global setup. or (2) use --no-cache. This is only temporary until https://github.com/facebook/jest/pull/13620 lands