diff --git a/test/servers/ServersListGroup.test.tsx b/test/servers/ServersListGroup.test.tsx
index 2f1b8e81..401777e7 100644
--- a/test/servers/ServersListGroup.test.tsx
+++ b/test/servers/ServersListGroup.test.tsx
@@ -1,6 +1,6 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { ListGroup } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
+import { MemoryRouter } from 'react-router-dom';
import { ServersListGroup } from '../../src/servers/ServersListGroup';
import { ServerWithId } from '../../src/servers/data';
@@ -9,44 +9,36 @@ describe('', () => {
Mock.of({ name: 'foo', id: '123' }),
Mock.of({ name: 'bar', id: '456' }),
];
- let wrapped: ShallowWrapper;
- const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
+ const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
const { servers = [], withChildren = true, embedded } = params;
- wrapped = shallow(
-
- {withChildren ? 'The list of servers' : undefined}
- ,
+ return render(
+
+
+ {withChildren ? 'The list of servers' : undefined}
+
+ ,
);
-
- return wrapped;
};
- afterEach(() => wrapped?.unmount());
-
it('renders title', () => {
- const wrapped = createComponent({});
- const title = wrapped.find('h5');
-
- expect(title).toHaveLength(1);
- expect(title.text()).toEqual('The list of servers');
+ setUp({});
+ expect(screen.getByRole('heading')).toHaveTextContent('The list of servers');
});
it('does not render title when children is not provided', () => {
- const wrapped = createComponent({ withChildren: false });
- const title = wrapped.find('h5');
-
- expect(title).toHaveLength(0);
+ setUp({ withChildren: false });
+ expect(screen.queryByRole('heading')).not.toBeInTheDocument();
});
it.each([
[servers],
[[]],
])('shows servers list', (servers) => {
- const wrapped = createComponent({ servers });
+ setUp({ servers });
- expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
- expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
+ expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0);
+ expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
});
it.each([
@@ -54,9 +46,7 @@ describe('', () => {
[false, 'servers-list__list-group'],
[undefined, 'servers-list__list-group'],
])('renders proper classes for embedded', (embedded, expectedClasses) => {
- const wrapped = createComponent({ servers, embedded });
- const listGroup = wrapped.find(ListGroup);
-
- expect(listGroup.prop('className')).toEqual(expectedClasses);
+ setUp({ servers, embedded });
+ expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
});
});