React Testing Cookbook

README.md

React Testing Cookbook

This gist aim's to gethering some leasons learned by testing React hooks with Jest and TypeScript.

FAQ.md

• Q: Makes sense to move useEffects to hooks which you have to load data?

A: I believe so. Every time I access a duck which loads external data, I'm interested in its data, not in calling a funciton to load it.

mokingReactHooks.ts

// Import react at the top
import React from 'react';

describe('OverviewPage', () => {
  // to mock useEffect
  const useEffectSpy = jest.spyOn(React, 'useEffect');
  beforeEach(() => {
    useEffectSpy.mockImplementation(() => {});
  });

  // to mock useState
  const useStateSpy = jest.spyOn(React, 'useState');
  const setStateMock = jest.fn();
  beforeEach(() => {
    useStateSpy.mockImplementation(() => [false, setStateMock]);
  });

  // continue...
})

testUseEffectCallback.ts

// If you need to use the useEffect callback function to execute it, you can do
it('my test', () => {
  // ...
  
  // get and exec useEffect Handler
  const useEffectHandler = useEffectSpy.mock.calls[0][0];
  useEffectHandler();

  // ...
});