jest快照测试未能使用react路由器v6组件为组件运行

Question

我正在尝试用jest运行简单的快照测试。但是，在安装和利用React路由器v6之后，所有使用react-router-dom组件的组件现在都会在测试期间崩溃。

header.tsx

import React from 'react';
import logo from '../../logo.svg'
import 'antd/dist/antd.min.css';
import { Link } from "react-router-dom";
import { PageHeader, Menu, Avatar, Button, Dropdown, Typography } from 'antd';
import { BellOutlined, UserOutlined } from '@ant-design/icons';

const { Title } = Typography;

const profileMenu = (
    <Menu
        items={[]}
    />
);

function WebHeader() {
    return (
        <PageHeader
            ghost={false}
            avatar={{
                src: <img src={logo} alt='icon' />,
                size: 48
            }}
            title={<Title level={1} style={{ marginBottom: 0 }}>SciOps</Title>}
            subTitle={
                <Menu mode="horizontal" defaultSelectedKeys={['projects']}>
                    <Menu.Item key="projects">
                        <Link to='/projects'>Projects</Link>
                    </Menu.Item>
                    <Menu.Item key="orgs">
                        <Link to='/organizations'>Organizations</Link>
                    </Menu.Item>
                </Menu>
            }
            extra={
                <>
                    <Button shape='circle' icon={<BellOutlined />} />
                    <Dropdown overlay={profileMenu} placement="bottom" arrow={{ pointAtCenter: true }} trigger={['click']}>
                        <a href="/#" onClick={e => e.preventDefault()}>
                            <Avatar size={36} icon={<UserOutlined />} style={{ marginRight: 0 }} />
                        </a>
                    </Dropdown>
                </>
            }
        ></PageHeader>
    )
}

export default WebHeader

header.test.tsx

import React from 'react';
import renderer from 'react-test-renderer'
import WebHeader from '../../components/header/header'

it("Snapshot of Header", () => {
  const tree = renderer.create(<WebHeader />).toJSON();
  expect(tree).toMatchSnapshot();
})

error

src/_test_/components/header.test.tsx
  ● Console

    console.error
      The above error occurred in the <Link> component:
      
          at LinkWithRef (/home/adib/forks/sciops-hub/packages/react-router-dom/index.tsx:264:7)
          at span
          at li
          at DomWrapper (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:34)
          at SingleObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/index.js:27:24)
          at ResizeObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/index.js:27:24)
          at InternalItem (/home/adib/forks/sciops-hub/front-end/node_modules/rc-overflow/lib/Item.js:29:25)
          at InternalRawItem (/home/adib/forks/sciops-hub/front-end/node_modules/rc-overflow/lib/RawItem.js:29:23)
          at LegacyMenuItem (/home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/MenuItem.js:71:34)
          at InternalMenuItem (/home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/MenuItem.js:102:21)
          at MenuItem (/home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/MenuItem.js:232:24)
          at Trigger (/home/adib/forks/sciops-hub/front-end/node_modules/rc-trigger/lib/index.js:80:36)
          at Tooltip (/home/adib/forks/sciops-hub/front-end/node_modules/rc-tooltip/lib/Tooltip.js:29:32)
          at /home/adib/forks/sciops-hub/front-end/node_modules/antd/lib/tooltip/index.js:103:33
          at MenuItem (/home/adib/forks/sciops-hub/front-end/node_modules/antd/lib/menu/MenuItem.js:61:37)
          at InheritableContextProvider (/home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/context/MenuContext.js:40:23)
          at ul
          at DomWrapper (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:34)
          at SingleObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/index.js:27:24)
          at ResizeObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/index.js:27:24)
          at Overflow (/home/adib/forks/sciops-hub/front-end/node_modules/rc-overflow/lib/Overflow.js:45:32)
          at InheritableContextProvider (/home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/context/MenuContext.js:40:23)
          at /home/adib/forks/sciops-hub/front-end/node_modules/rc-menu/lib/Menu.js:79:32
          at /home/adib/forks/sciops-hub/front-end/node_modules/antd/lib/menu/index.js:72:24
          at Menu (/home/adib/forks/sciops-hub/front-end/node_modules/antd/lib/menu/index.js:191:37)
          at span
          at div
          at div
          at div
          at DomWrapper (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:34)
          at SingleObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/SingleObserver/index.js:27:24)
          at ResizeObserver (/home/adib/forks/sciops-hub/front-end/node_modules/rc-resize-observer/lib/index.js:27:24)
          at PageHeader (/home/adib/forks/sciops-hub/front-end/node_modules/antd/lib/page-header/index.js:129:45)
          at WebHeader
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8661:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8694:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4092:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4113:9)
      at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13232:13)
      at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14330:9)
      at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)

Answer 1

如果我不得不猜测，这是react-router-dom Link组件没有在路由上下文中呈现的问题。RRDv6添加了许多不变量检查，这些检查可能失败，如果组件未正确使用，则会引发错误。

尝试将WebHeader呈现到路由器中进行测试。在单元测试中使用MemoryRouter很常见，因为它不使用任何浏览器历史对象，也不需要DOM。

示例：

import React from 'react';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import WebHeader from '../../components/header/header';

it("Snapshot of Header", () => {
  const tree = renderer.create(
    <MemoryRouter>
      <WebHeader />
    </MemoryRouter>
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

如果我正确地回忆起(使用快照单元测试已经有很长一段时间了)，那么测试将失败，直到您更新正在测试的快照，所以您需要采取任何必要的步骤来运行测试一次，并通知jest也更新快照。对不起，我不记得具体的程序，但我知道这是正式记录的。