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

Question

我看过非常相似的post：但是我遇到了不同的错误，在尝试使用 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)

我找到的一个解决方案是 install/reinstall 一个名为 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" 的软件包上。首先，我建议为您的 OS 进行任何软件更新，因为这可能会导致 watchman 问题。其次，如果 watchman 是与 npm 一起安装的，那可不是什么好事。这样做

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

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

弄清楚这个基础工作后，我只需要将 <MemoryRouter> 添加到我正在测试的组件中，以使 CRA 和 React Router 能够很好地协同工作。 post 解释了如何比我更好地做到这一点：

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

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

Why does React Router break create-react-app tests? How to fix this?

javascript

testing

reactjs

react-router

create-react-app