React State не получает обновления перед утверждением, даже действуя внутри функции act

Question

Почему ниже тестовый блок не проходит? У меня похожая ситуация в реальной жизни, но здесь я тестирую ее упрощенную версию.

Я ожидаю, что утверждения должны выполняться после того, как act завершит обновление состояния ловушки, но это не так. Хотя состояние получает обновление, после выполнения утверждений.

Пожалуйста, предложите, если есть какой-либо другой способ проверить такую ​​ситуацию.

Код

 const HookForTest = () => {
  const [data, setData] = useState('');

  const updateDataFromOutside = toData => {
    setData(toData);
  };

  return [data, updateDataFromOutside];
};

Модульный тест

describe('HookForTest', () => {
  test('should change state on calling updateDataFromOutside function ', async () => {
    let hookData;

    testHook(() => {
      hookData = HookForTest();
    });

    let [data, updateDataFromOutside] = hookData;

    await act(async () => {
      updateDataFromOutside('testData');
    });

    expect(data).toEqual('testData');
  });
});

Я использую несколько служебных функций для тестирования пользовательского хука ниже приведен код:

export const TestHook = ({callback}) => {
  callback();
  return null;
};

export const testHook = callback => {
  mount(<TestHook callback={callback} />);
};

Результат теста

 ● HookForTest › should change state on calling updateDataFromOutside function 

    expect(received).toEqual(expected) // deep equality

    Expected: "testData"
    Received: ""

      178 |     });
      179 | 
    > 180 |     expect(data).toEqual('testData');

Answer 1

Проблема здесь в том, что let [data, updateDataFromOutside] = hookData; блокирует значение data на то, что было его первоначальным значением. Даже если было вызвано что-то вроде hookData[0] = 'something else', значение data все равно будет ''.

Изменение теста на что-то подобное должно работать

describe('HookForTest', () => {
  test('should change state on calling updateDataFromOutside function ', async () => {
    let data;
    let updateDataFromOutside;

    testHook(() => {
      let hookData = HookForTest();
      data = hookData[0]
      updateDataFromOutside = hookData[1]
    });

    await act(async () => {
      updateDataFromOutside('testData');
    });

    expect(data).toEqual('testData');
  });
});