Question

我看过非常相似的帖子： Using Jest to test a Link from react-router v4 但我在尝试使用CRA和React路由器时遇到了不同的错误和各种错误。

如果测试脚本为"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）但是试图安装守望者也会抛出错误。

我找到的另一个解决方案（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使用的一个名为＆＃34; watchman＆＃34;的软件包。首先，我建议为您的操作系统进行任何软件更新，因为这可能会导致守望者问题。第二，如果守望者是用npm安装的，那就没有bueno。这样做

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

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

在弄清楚这个基础之后，我只需要将<MemoryRouter>添加到我正在测试的组件中，以使CRA和React Router一起玩得很好。这篇文章解释了如何更好地做到这一点：Using Jest to test a Link from react-router v4

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

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

1 个答案: