fix link tests

janis-commerce · Sep 15, 2022 · 660f59f · 660f59f
1 parent df474bc
commit 660f59f
Showing 1 changed file with 53 additions and 56 deletions.
diff --git a/src/components/Link/Link.test.js b/src/components/Link/Link.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { Router as ReactRouter } from 'react-router';
-import { getCurrentHistory } from 'utils/location';
 import Link from 'components/Link';
 import styled from './styles';
+import { MemoryRouter } from 'react-router-dom';
 
-const history = getCurrentHistory();
-
-const findLinkProps = (wrapper, prop = 'to') =>
-	wrapper
-		.find('[data-test="react-router-link"]')
-		.first()
-		.props()[prop];
+const findLinkProps = (component, prop = 'to') =>
+	component.find('[data-test="react-router-link"]').first().props()[prop];
 
 describe('Link component', () => {
 	const origin = 'https://janis.in';
@@ -32,97 +26,100 @@ describe('Link component', () => {
 	});
 
 	test('render', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href}>{text}</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.children().exists()).toBe(true);
+		expect(component.children().exists()).toBe(true);
 	});
 	test('should show the children', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href}>{text}</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.text()).toBe(text);
+		expect(component.text()).toBe(text);
 	});
 	test('shows href content if not receive children in react link', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href} />
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.text()).toBe(href);
+		expect(component.text()).toBe(href);
 	});
-	test('shows href content if not receive children in normal link', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+	test('shows href content if not receive children in normal link (href2)', () => {
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href2} />
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.text()).toBe(href2);
+		expect(component.text()).toBe(href2);
 	});
 	test('when href is an internal link, path must be the exact href', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={internalLink} />
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(findLinkProps(wrapper)).toBe('/delivery/shipping/pick-up');
+		expect(findLinkProps(component)).toBe('/delivery/shipping/pick-up');
 	});
 	test('when href is an internal link starting with "/", path must be the exact href', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={internalLink} />
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(findLinkProps(wrapper)).toBe('/delivery/shipping/pick-up');
+		expect(findLinkProps(component)).toBe('/delivery/shipping/pick-up');
 	});
 	test('when href is an internal link which does not start with "/", that character must be added to href', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={internalLink2} />
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(findLinkProps(wrapper)).toBe('/playground/views-demo/monitor');
+		expect(findLinkProps(component)).toBe('/playground/views-demo/monitor');
 	});
 	test('target default is _self', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href}>{text}</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.children().props().target).toBe('_self');
+		const LinkTargetProp = component.children().children().props().target;
+		expect(LinkTargetProp).toBe('_self');
 	});
-	test('recive prop target', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+	test('receive prop target', () => {
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href} target="_blank">
 					{text}
 				</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.children().props().target).toBe('_blank');
+		const LinkTargetProp = component.children().children().props().target;
+		expect(LinkTargetProp).toBe('_blank');
 	});
 	test('receive prop icon', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href} icon={icon}>
 					{text}
 				</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.children().props().icon).toBe('user_closed');
+		const LinkIconProp = component.children().children().props().icon;
+		expect(LinkIconProp).toBe('user_closed');
 	});
-	test('renders Icon component if prop "icon" is received', () => {
-		const wrapper = mount(
-			<ReactRouter history={history}>
+	test('render Icon component if prop "icon" is received', () => {
+		const component = mount(
+			<MemoryRouter initialEntries={['/']}>
 				<Link href={href} icon={icon}>
 					{text}
 				</Link>
-			</ReactRouter>
+			</MemoryRouter>
 		);
-		expect(wrapper.find(styled.StyledIcon).length).toBe(1);
+		expect(component.find(styled.StyledIcon).length).toBe(1);
 	});
 });