Wk-notes-01-23-test-hook

Bugs from analytic tools

There could be bugs triggered from other lib, like analytics tool glass box. Do NOT spend too much time on it.

Test React Hooks

I invested some time into hooks recently, this is sth I want to share: People says, for custom hooks, it can extract same functionality out as composable logic, so that the logic is more maintainable and testable，but then I found to test it, you will always need to create and mount a Component over it, because hooks behavior happens ONLY in react component in the vdom. I would say it is testable, but still a bit painful.

So here are 2 snippets I found that can be a conventions we used to test a custom hook:

I. With Customed Component, and simply get things from wrapper.prop

it('get same value when using `useMemo` and rerender with same prop in dependencies', () => {
      function Child() {
        return false;
      }
      function ComponentUsingMemoHook(props) {
        const { count } = props;
        const memoized = useMemo(() => ({ result: count * 2 }), [count]);
        return (
          <Child memoized={memoized} />
        );
      }
      const wrapper = mount(<ComponentUsingMemoHook count={1} />);
      const initialValue = wrapper.find(Child).prop('memoized');
      wrapper.setProps({ unRelatedProp: '123' });
      const nextValue = wrapper.find(Child).prop('memoized');
      expect(initialValue).to.equal(nextValue);
    });
    it('get different value when using `useMemo` and rerender with different prop in dependencies', () => {
      function Child() {
        return false;
      }
      function ComponentUsingMemoHook(props) {
        const { count, relatedProp } = props;
        const memoized = useMemo(() => ({ result: count * 2 }), [count, relatedProp]);
        return (
          <Child memoized={memoized} relatedProp={relatedProp} />
        );
      }
      const wrapper = mount(<ComponentUsingMemoHook relatedProp="456" count={1} />);
      const initialValue = wrapper.find(Child).prop('memoized');
      wrapper.setProps({ relatedProp: '123' });
      const nextValue = wrapper.find(Child).prop('memoized');
      expect(initialValue).to.not.equal(nextValue);
    });
  });   
});

Ref : https://github.com/airbnb/enzyme/pull/2144/files#diff-fadeaaf857f5b3fe6522e89a63ca9a41

II. Use react-test-hooks lib

const { result } = renderHook(() => useTime(100));       expect(result.current).toBe('mockNow');

Ref : https://www.newline.co/@jamesfulford/testing-custom-react-hooks-with-jest--8372a502

A practice from downshiftjs

• Get a folder/file structure for each complex hook

• Use a testUtil to set up rendering a test component (as always)

• Focus on testing hooks funtionality in test.spec.js

Ref : https://github.com/downshift-js/downshift/blob/v4.0.8/src/hooks/useSelect/testUtils.js, https://github.com/downshift-js/downshift/blob/v4.0.8/src/hooks/useSelect/__tests__/getLabelProps.test.js