useDerivedState-test.js

import React from 'react';
import { create, act } from 'react-test-renderer';
import { useDerivedState } from './useDerivedState';

function TestComponent({ value }) {
  let [state, setState] = useDerivedState(value);
  let increment = jest.fn(() => setState(state + 1));
  return <button onClick={increment}>{state}</button>;
}

test('use of initial state', () => {
  let result = create(<TestComponent value={13} />);
  expect(result.root.findByType('button').children).toEqual(['13']);
});

test('ability to update state', () => {
  let result = create(<TestComponent value={13} />);
  act(() => result.root.findByType('button').props.onClick());
  expect(result.root.findByType('button').children).toEqual(['14']);
});

test('override of state by parent', () => {
  let result = create(<TestComponent value={13} />);
  result.update(<TestComponent value={256} />);
  expect(result.root.findByType('button').children).toEqual(['256']);
});

useDerivedState.js

function useDerivedState(data) {
  let [state, setState] = useState(data);
  let [prev, setPrev] = useState(data);
  
  if (data !== prev) {
    setPrev(data);
    setState(data);
  }

  return [state, setState];
}