reactjs - 测试 --coverage 抛出 "Nothing was returned from render."错误

Question

我正在测试一个简单组件的渲染。下面给出了组件的源代码和测试规范。

App.js

import React from 'react';

export const App = () => {
  return (<div data-testid="application">Hello World</div>);
}

App.spec.js

import React from 'react';
import { cleanup, render } from '@testing-library/react';
import { App } from '../App';

beforeEach(cleanup); /* Clean the DOM */

describe('<App />', () => {
  test('Render the application', () => {
    const { queryByTestId } = render(<App />);
    expect(queryByTestId('application')).toBeTruthy();
  });
});

1. 当我执行 npm test --coverage 时在终端中，没有任何问题。
2. 当我执行 npm test -- --coverage 时在终端中，我收到以下错误
3. 当我执行 yarn test --coverage 时在终端中，我收到以下错误

错误

FAIL src/__tests__/App.spec.js

<App />

✕ Render the application (28ms)

● <App /> › Render the application

App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

   7 | describe('<App />', () => {
   8 |   test('Render the application', () => {
>  9 |     const { queryByTestId } = render(<App />);
     |                               ^
  10 |     expect(queryByTestId('application')).toBeTruthy();
  11 |   });
  12 | });

  at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14348:23)
  at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16762:28)
  at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17542:5)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
  at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
  at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
  at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
  at node_modules/react-dom/cjs/react-dom.development.js:24758:7
  at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
  at node_modules/@testing-library/react/dist/pure.js:86:25
  at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
  at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
  at render (node_modules/@testing-library/react/dist/pure.js:82:26)
  at Object.<anonymous> (src/__tests__/App.spec.js:9:31)

Answer 1

如果您禁用 whatchAll，测试不会失败，因此它会正确呈现。

只需使用:

npm test --coverage --watchAll=false