javascript - 为什么 React Router 会破坏 create-react-app 测试？如何解决这个问题？

Question

我看过非常相似的帖子: Using Jest to test a Link from react-router v4但是我遇到了不同的错误，在尝试使用 CRA 和 React Router 时出现了各种各样的错误。

如果测试脚本是 "test": "react-scripts test --env=jsdom"，我会收到阻止测试运行的错误:

2017-06-28 14:14 node[6612] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1018:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1420:11)

我找到的一个解决方案是安装/重新安装一个名为 watchman 的库，但我无法让它工作。 ( https://github.com/facebook/react-native/issues/10028 ) 但尝试安装 watchman 也会抛出错误。

我找到的另一个解决方案 (https://github.com/jest-community/vscode-jest/issues/125) 是将该测试脚本更改为 "test": "jest"，然后我收到此错误:

src/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 |

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.646s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

在回溯我的提交历史以查找测试套件最初出现问题的位置之后，我发现了一组不同的错误。第一个错误发生在安装 react-router-dom 并将这个衬里添加到 App.js 之后

<Link to="/">Scratch</Link>

我收到这个错误:

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Failed context type: The context `router` is marked as required in`Link`, but its value is `undefined`.
        in Link (at App.js:13)
        in NavbarBrand (at App.js:12)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:11)
        in div (created by Grid)
        in Grid (created by Navbar)
        in nav (created by Navbar)
        in Navbar (created by Uncontrolled(Navbar))
        in Uncontrolled(Navbar) (at App.js:10)
        in div (at App.js:9)
        in App (at App.test.js:7)

  console.error node_modules/react-dom/cjs/react-dom.development.js:9627
    The above error occurred in the <Link> component:
        in Link (at App.js:13)
        in NavbarBrand (at App.js:12)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:11)
        in div (created by Grid)
        in Grid (created by Navbar)
        in nav (created by Navbar)
        in Navbar (created by Uncontrolled(Navbar))
        in Uncontrolled(Navbar) (at App.js:10)
        in div (at App.js:9)
        in App (at App.test.js:7)

我正在尝试的每件事似乎都会产生不同的错误，我不知道设置它的正确方法，而且由于我还是 React 的新手，我对这些消息中的任何一条都不是很熟悉，我在网上找到的解决方案似乎不起作用。

Answer 1

如果其他人遇到类似问题，我将按照以下方法解决此问题。

首先，网上很多人都说去把你的package.json npm测试脚本改成"test": "jest"这是错误的做法:https://github.com/facebook/jest/issues/5119#issuecomment-356120965

保持为"test": "react-scripts test --env=jsdom" (它是如何从 CRA 开箱即用的)。这是要使用的正确脚本，但我仍然收到此错误:

2017-06-28 14:14 node[6612] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1018:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1420:11)

这里的问题在于 CRA 使用的名为“watchman”的软件包。首先，我建议为你的操作系统做任何软件更新，因为这可能会导致守望者问题。其次，如果 watchman 是与 npm 一起安装的，那可不是什么好事。这样做

npm uninstall -g watchman
brew install --HEAD watchman
npm start

这引出了我的下一个问题:brew 在尝试安装 watchman 时会抛出错误。原来我的 brew 环境有一堆损坏的链接和权限错误。使用 brew doctor 我能够解决这些问题并成功地重新安装 watchman，并摆脱了那个错误。

弄清楚这个基础后，我只需要添加 <MemoryRouter>到我正在测试的组件，以使 CRA 和 React Router 能够很好地协同工作。这篇文章解释了如何比我更好地做到这一点:Using Jest to test a Link from react-router v4

在所有这些步骤之后，Jest 终于开始正常工作了。