jest snapshot test failing to run for components using react-router v6 components

user_17927531 0
Viewed 118

I am trying to run simple snapshot tests with jest. However after installing and utilizing React Router v6, all components using react-router-dom components now crash during testing.

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)
react-router jestjs typescript reactjs
1 Answers

If I had to hazard a guess it's an issue with the react-router-dom Link component not being rendered within a routing context. RRDv6 added a lot of invariant checks that can fail and will throw errors if the components are not used correctly.

Try rendering the WebHeader into a router for testing. It's common to use the MemoryRouter in unit tests because it doesn't use any browser history object or need a DOM.

Example:

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();
});

If I recall correctly (it's been a long time since I used snapshot unit tests) the test will fail until you update the snapshot you are testing against, so you'll need to take whatever steps necessary to run the test once and inform jest to also update the snapshot. Sorry I don't recall the specific procedure for this but I know it's documented officially.

user_86908570
Related