Question

开玩笑地运行测试用例时我遇到一个问题。

这是我的测试用例PageHeader.tsx

import { render } from '@testing-library/react';
import React from 'react';
import PageHeader from './PageHeader';

describe('Header', () => {
    it('should render properly', () => {
        const { container } = render(<PageHeader />);
        expect(container).toMatchSnapshot();
    });
});

我的组件PageHeader.tsx从 antd 设计返回Header组件

import { Layout } from 'antd';
import React from 'react';
import * as Styled from './PageHeader.styled';

const { Header } = Layout;

export const PageHeader: React.SFC = () => {
    return (
        <Styled.Header>
            <Header style={{ padding: 0 }} />
        </Styled.Header>
    );
};

export default PageHeader;

这里是PageHeader.styled.tsx

import styled from 'styled-components';

export const Header = styled.div`
    & > header {
        background: #fff;
    }
`;

运行有趣的测试用例后，出现错误

这里是错误日志的完整跟踪。我尝试了多种方法来解决此问题，但对我没有任何帮助。

 FAIL  src/components/common/layout/Header/PageHeaderHeader.test.tsx (7.288 s)
  Header
    ✕ should render properly (71 ms)

  ● Header › should render properly

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

       5 | describe('Header', () => {
       6 |     it('should render properly', () => {
    >  7 |         const { container } = render(<PageHeader />);
         |                               ^
       8 |         expect(container).toMatchSnapshot();
       9 |     });
      10 | });

      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 invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      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:98: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:94:26)
      at Object.<anonymous> (src/components/common/layout/Header/PageHeaderHeader.test.tsx:7:31)

  console.error
    Error: Uncaught [Error: PageHeader(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]


       ....
  console.error
    The above error occurred in the <PageHeader> component:
        in PageHeader
    
    Consider adding an error boundary to your tree to customize error handling behavior.

      10 |             return;
      11 |         }
    > 12 |         originalError.call(console, ...args);
         |         ^
      13 |     };
      14 | });
      15 | 

      at CustomConsole.console.error (config/jest/setupAfterEnv.js:12:9)
      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:19527:21)
      at logError (node_modules/react-dom/cjs/react-dom.development.js:19564:5)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20708:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12490:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12511:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:19883:11)

渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null。 [笑话]

0 个答案: