Migrated ScrollToTop test to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-06 20:13:51 +02:00
parent 37adcb52cf
commit d327142d00
4 changed files with 14 additions and 22 deletions

View file

@ -3,3 +3,4 @@ import 'jest-canvas-mock';
import ResizeObserver from 'resize-observer-polyfill'; import ResizeObserver from 'resize-observer-polyfill';
(global as any).ResizeObserver = ResizeObserver; (global as any).ResizeObserver = ResizeObserver;
(global as any).scrollTo = () => {};

View file

@ -1,7 +1,7 @@
import { FC, PropsWithChildren, useEffect } from 'react'; import { FC, PropsWithChildren, useEffect } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
const ScrollToTop = (): FC<PropsWithChildren<unknown>> => ({ children }) => { export const ScrollToTop: FC<PropsWithChildren<unknown>> = ({ children }) => {
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
@ -10,5 +10,3 @@ const ScrollToTop = (): FC<PropsWithChildren<unknown>> => ({ children }) => {
return <>{children}</>; return <>{children}</>;
}; };
export default ScrollToTop;

View file

@ -1,6 +1,6 @@
import axios from 'axios'; import axios from 'axios';
import Bottle from 'bottlejs'; import Bottle from 'bottlejs';
import ScrollToTop from '../ScrollToTop'; import { ScrollToTop } from '../ScrollToTop';
import { MainHeader } from '../MainHeader'; import { MainHeader } from '../MainHeader';
import { Home } from '../Home'; import { Home } from '../Home';
import { MenuLayout } from '../MenuLayout'; import { MenuLayout } from '../MenuLayout';
@ -23,7 +23,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv'); bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
// Components // Components
bottle.serviceFactory('ScrollToTop', ScrollToTop); bottle.serviceFactory('ScrollToTop', () => ScrollToTop);
bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown'); bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');

View file

@ -1,21 +1,14 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import createScrollToTop from '../../src/common/ScrollToTop'; import { MemoryRouter } from 'react-router-dom';
import { ScrollToTop } from '../../src/common/ScrollToTop';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn().mockReturnValue({}),
}));
describe('<ScrollToTop />', () => { describe('<ScrollToTop />', () => {
let wrapper: ShallowWrapper; it.each([
['Foobar'],
beforeEach(() => { ['Barfoo'],
const ScrollToTop = createScrollToTop(); ['Something'],
])('just renders children', (children) => {
wrapper = shallow(<ScrollToTop>Foobar</ScrollToTop>); render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
expect(screen.getByText(children)).toBeInTheDocument();
}); });
afterEach(() => wrapper.unmount());
it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
}); });