开玩笑不变违反答案

【问题标题】：Jest Invariant Violation开玩笑不变违反
【发布时间】：2019-05-24 07:38:45
【问题描述】：

简单使用react hooks in beta在使用jest时不起作用，导致错误

Invariant Violation：Hooks 只能在函数组件内部调用。

尽管环顾四周，但我没有看到带有反应钩子的 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();
  })
});

会因为不变的错误而失败。

我希望这确实有效。

【问题讨论】：

道歉通过github.com/ghinks/jest-react-hook-issue.git克隆示例

标签： reactjs jestjs

【解决方案1】：

问题是错误所说的。函数组件不应该被直接调用。

应该如the reference所示：

import renderer from 'react-test-renderer';

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

【讨论】：

非常感谢我试过这个没有用。我实际上是在使用功能组件的工作站点并尝试使用 beta 阶段反应挂钩并遇到错误。如果你确定的话，我很高兴你提出 PR 反对它。
“无济于事”究竟是什么意思？ Hooks 是 alpha，而不是 beta。这与其他 React 包相同。您可能需要匹配 react-test-renderer 版本，即 16.7.0-alpha.2。请注意，16.7.0 版本不包含挂钩，reactjs.org/blog/2018/12/19/react-v-16-7.html
真诚地感谢 Estus，道歉“无济于事”只是一种超级礼貌的说法，它不起作用。我确实提出了一个分支，采纳了你在船上的建议。 github.com/ghinks/jest-react-hook-issue/tree/solution/… 我得到了同样的错误，我认为这有点深，因为钩子似乎在测试中不起作用。我非常高兴你能对这个分支进行 PR 以使其正常工作。
我的意思是它不能工作的原因有很多。错误还是Invariant Violation？从 repo 中，我看到您没有遵循使用 react-test-renderer@16.7.0-alpha.2 的建议。同样，它不适用于 react-test-renderer@16.7.0。我相信这就是错误仍然存在的原因。可悲的是，我目前无法检查它是否使测试可行并进行 PR。
它对你有用吗？如果有，请考虑将答案标记为已回答，这可能会对其他用户有所帮助。

【解决方案2】：

看起来很简单的改变

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

解决这个问题

【讨论】：