Шутка Инвариантное Нарушение

Question

Простое использование реагирующих хуков в бета-версии не работает при использовании jest и приводит к ошибке

Инвариантное нарушение: хуки могут вызываться только внутри тела функционального компонента.

Несмотря на то, что я много осматриваюсь, я не вижу рабочих примеров Jest с реакционными крючками.Да, я знаю, что это бета-версия, но давайте пометим ее сейчас.

https://github.com/ghinks/jest-react-hook-issue.git

const MyDiv = () => {
  const [count, setCount] = useState(0)
  const clickHandler = () => { setCount(count + 1); 
  console.log(`clicked ${count}`) }
  return (
    <div onClick={clickHandler}>
      ClickMe {count}
    </div>
  )
}

, даже простые тесты

import { MyDiv } from './App';

describe('Test Component using hooks', () => {
  test('MyDiv', () => {
    const div = MyDiv();
    expect(div).toMatchSnapshot();
  })
});

завершатся неудачно с неизменной ошибкой.

Я бы ожидал, что это действительно сработает.

Answer 1

выглядит как простое изменение на

describe('Test Component using hooks', () => {
  test('MyDiv', () => {
    expect(<MyDiv/>).toMatchSnapshot();
  })
});

разрешает это

Answer 2

Проблема в том, что говорит ошибка.Компоненты функций не должны вызываться напрямую.

Это должно быть как , ссылка показывает:

import renderer from 'react-test-renderer';

...
const myDiv = renderer.create(<MyDiv/>).toJSON();
expect(myDiv).toMatchSnapshot();