使用 react-testing-library 渲染方法不起作用答案

【问题标题】：Render method not working by using react-testing-library使用 react-testing-library 渲染方法不起作用
【发布时间】：2019-08-17 10:44:03
【问题描述】：

我试图测试 react-testing-library 文档中提供的基本示例。我完全复制并粘贴了这段代码here

无论如何它都失败了。

这里是失败的测试结果：

shows the children when the checkbox is checked

    TypeError: Cannot read property 'current' of undefined

      34 | test('shows the children when the checkbox is checked', () => {
      35 |   const testMessage = 'Test Message'
    > 36 |   const {queryByText, getByLabelText, getByText} = render(
         |                                                    ^
      37 |     <HiddenMessage>{testMessage}</HiddenMessage>,
      38 |   )
      39 | 

      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:983:55)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1418:12)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous> (src/components/Authentication/SignUp/index.test.js:36:52)

  ● shows the children when the checkbox is checked

    TypeError: Cannot read property 'current' of undefined

      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:983:55)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1418:12)
      at node_modules/@testing-library/react/dist/act-compat.js:57:20
      at asyncAct (node_modules/@testing-library/react/dist/act-compat.js:38:14)
      at Object.<anonymous> (node_modules/@testing-library/react/dist/index.js:28:35)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.318s, estimated 3s
Ran all test suites related to changed files.

有什么想法吗？

【问题讨论】：

显示HiddenMessage组件的代码。
我已经添加了上面的链接。该代码与 react-testing-library 示例中使用的代码完全相同。以防万一，这里再次链接：github.com/testing-library/react-testing-library#basic-example
为我工作。确保您安装了最新版本的 React、React DOM 和测试库。
是的，你说得对。我已经将 react 的版本更新到了最新的 16.9，一切正常。

标签： reactjs jestjs react-testing-library

【解决方案1】：

我的研究也遇到了这个问题，看起来undefined 被调用的undefined 是IsSomeRendererActing 在https://github.com/facebook/react/blob/master/packages/react-dom/src/test-utils/ReactTestUtilsAct.js#L79 中的IsSomeRendererActing

它看起来像一个在 react 包之间共享的全局变量。我能给出的最好建议是检查 react dom react 和 react test utils 以及任何其他 react 包是否都处于同一版本

【讨论】：

【解决方案2】：

此错误可能来自HiddenMessage 组件内部，而不是您的测试代码中的任何错误。看起来您正在尝试访问 current 在不存在的东西上（可能是 ref？）

测试代码看起来正确，您应该在HiddenMessage 中追踪您尝试访问current 的位置。

【讨论】：