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';
(global as any).ResizeObserver = ResizeObserver;
(global as any).scrollTo = () => {};

View file

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

View file

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

View file

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