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)
CodePudding user response:
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.