diff --git a/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.js b/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.js
new file mode 100644
index 000000000000..8a20d512fb09
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ToggleButtonGroup from '../toggle-button-group.jsx';
+import ToggleButton from '../toggle-button.jsx';
+
+const MockToggleButtonGroup = ({ value, className, multiple, onChange }) => (
+    <ToggleButtonGroup value={value} className={className} onChange={onChange} multiple={multiple}>
+        <ToggleButton value='first-button'>first test button</ToggleButton>
+        {multiple && <ToggleButton value='second-button'>second test button</ToggleButton>}
+    </ToggleButtonGroup>
+);
+
+describe('ToggleButtonGroup', () => {
+    it('should have "test-class" class when "className" passed', () => {
+        render(<MockToggleButtonGroup className='test-class' />);
+        expect(screen.getByTestId('dt_toggle_button_group')).toHaveClass('test-class');
+    });
+
+    it('should be called when the "ToggleButton" is clicked with value of the button', () => {
+        const mock_click = jest.fn();
+        render(<MockToggleButtonGroup onChange={mock_click} />);
+        const button = screen.getByRole('button', { name: 'first test button' });
+        userEvent.click(button);
+        expect(mock_click).toHaveBeenCalledTimes(1);
+        expect(mock_click.mock.calls[0][1]).toBe('first-button');
+    });
+
+    it('should be called when the "ToggleButton" is clicked with an empty array', () => {
+        const mock_click = jest.fn();
+        render(<MockToggleButtonGroup value={['first-button']} multiple onChange={mock_click} />);
+        const button = screen.getByRole('button', { name: 'first test button' });
+        userEvent.click(button);
+        expect(mock_click).toHaveBeenCalledTimes(1);
+        expect(Array.isArray(mock_click.mock.calls[0][1])).toBeTruthy();
+        expect(mock_click.mock.calls[0][1]).toHaveLength(0);
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.tsx b/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.tsx
deleted file mode 100644
index e1152384278e..000000000000
--- a/packages/trader/src/App/Components/Elements/ToggleButton/__tests__/toggle-button-group.spec.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-// TODO refactor old tests in this component
-import React from 'react';
-import ToggleButton from '../toggle-button.jsx';
-import ToggleButtonGroup from '../toggle-button-group.jsx';
-import { render } from '@testing-library/react';
-
-// configure({ adapter: new Adapter() });
-
-describe('<ToggleButtonGroup />', () => {
-    it('test test for passing the build', () => {
-        // render(<ToggleButtonGroup />);
-        // const wrapper = shallow(
-        //     <ToggleButtonGroup>
-        //         <ToggleButton value='test'>Test</ToggleButton>
-        //     </ToggleButtonGroup>
-        // );
-        // expect(wrapper.find('div').childAt(0).type()).toBe(ToggleButton);
-    });
-
-    // describe('prop: onChange', () => {
-    //     it('should be called when one of the toggle_buttons is clicked', () => {
-    //         const callback = fake();
-    //         const wrapper = mount(
-    //             <ToggleButtonGroup onChange={callback}>
-    //                 <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                 <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //             </ToggleButtonGroup>
-    //         );
-
-    //         wrapper.find(ToggleButton).at(0).simulate('click');
-    //         expect(callback.callCount).toBe(1);
-    //     });
-
-    //     describe('single choice', () => {
-    //         it('should be called when one of the toggle_buttons is clicked with value of the button', () => {
-    //             const callback = fake();
-    //             const wrapper = mount(
-    //                 <ToggleButtonGroup onChange={callback}>
-    //                     <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                     <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //                 </ToggleButtonGroup>
-    //             );
-
-    //             wrapper.find(ToggleButton).at(0).simulate('click');
-    //             expect(callback.callCount).toBe(1);
-    //             expect(callback.args[0][1]).toBe('test-one');
-    //         });
-    //         it('should be called when one of the toggle_buttons is clicked with null value', () => {
-    //             const callback = fake();
-    //             const wrapper = mount(
-    //                 <ToggleButtonGroup onChange={callback} value='test-one'>
-    //                     <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                     <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //                 </ToggleButtonGroup>
-    //             );
-
-    //             wrapper.find(ToggleButton).at(0).simulate('click');
-    //             expect(callback.callCount).toBe(1);
-    //             expect(callback.args[0][1]).toBeNull();
-    //         });
-    //     });
-
-    //     describe('multiple choice', () => {
-    //         it('should be called when one of the toggle_buttons is clicked with value of the button', () => {
-    //             const callback = fake();
-    //             const wrapper = mount(
-    //                 <ToggleButtonGroup onChange={callback} multiple>
-    //                     <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                     <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //                 </ToggleButtonGroup>
-    //             );
-
-    //             wrapper.find(ToggleButton).at(0).simulate('click');
-    //             expect(callback.callCount).toBe(1);
-    //             expect(callback.args[0][1].length).toBe(1);
-    //             expect(callback.args[0][1].slice(-1)).toEqual(['test-one']);
-    //         });
-    //         it('should be called when the first ToggleButton is clicked with an empty array', () => {
-    //             const callback = fake();
-    //             const wrapper = mount(
-    //                 <ToggleButtonGroup onChange={callback} value={['test-one']} multiple>
-    //                     <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                     <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //                 </ToggleButtonGroup>
-    //             );
-
-    //             wrapper.find(ToggleButton).at(0).simulate('click');
-    //             expect(callback.callCount).toBe(1);
-    //             expect(Array.isArray(callback.args[0][1])).toBe(true);
-    //             expect(callback.args[0][1].length).toBe(0);
-    //         });
-    //     });
-    // });
-
-    // describe('Check the button selection', () => {
-    //     it('should select the button Test One in single mode', () => {
-    //         const callback = fake();
-    //         const wrapper = mount(
-    //             <ToggleButtonGroup onChange={callback} value={'test-one'}>
-    //                 <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                 <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //             </ToggleButtonGroup>
-    //         );
-
-    //         const test_one_button = wrapper.find(ToggleButton).at(0);
-    //         expect(test_one_button.props().value).toBe('test-one');
-    //         expect(test_one_button.props().is_selected).toBe(true);
-    //     });
-
-    //     it('should select the button Test One in multiple mode', () => {
-    //         const callback = fake();
-    //         const wrapper = mount(
-    //             <ToggleButtonGroup onChange={callback} value={['test-two', 'test-one']}>
-    //                 <ToggleButton value='test-one'>Test One</ToggleButton>
-    //                 <ToggleButton value='test-two'>Test Two</ToggleButton>
-    //             </ToggleButtonGroup>
-    //         );
-
-    //         const button_one = wrapper.find(ToggleButton).at(0);
-    //         expect(button_one.props().value).toBe('test-one');
-    //         expect(button_one.props().is_selected).toBe(true);
-
-    //         const button_two = wrapper.find(ToggleButton).at(1);
-    //         expect(button_two.props().value).toBe('test-two');
-    //         expect(button_two.props().is_selected).toBe(true);
-    //     });
-    // });
-});
diff --git a/packages/trader/src/App/Components/Elements/ToggleButton/toggle-button-group.jsx b/packages/trader/src/App/Components/Elements/ToggleButton/toggle-button-group.jsx
index b4833841e03d..68b64ae82bbf 100644
--- a/packages/trader/src/App/Components/Elements/ToggleButton/toggle-button-group.jsx
+++ b/packages/trader/src/App/Components/Elements/ToggleButton/toggle-button-group.jsx
@@ -41,7 +41,7 @@ const ToggleButtonGroup = ({ children, className, multiple, onChange, value, ...
     });
 
     return (
-        <div className={classNames('toggle-button-group', className)} {...others}>
+        <div data-testid='dt_toggle_button_group' className={classNames('toggle-button-group', className)} {...others}>
             {toggle_buttons}
         </div>
     );