diff --git a/webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap b/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
similarity index 100%
rename from webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap
rename to webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
diff --git a/webapp/channels/src/components/setting_item_max.test.jsx b/webapp/channels/src/components/setting_item_max.test.tsx
similarity index 54%
rename from webapp/channels/src/components/setting_item_max.test.jsx
rename to webapp/channels/src/components/setting_item_max.test.tsx
index b0bd5175f8..4ef1c32225 100644
--- a/webapp/channels/src/components/setting_item_max.test.jsx
+++ b/webapp/channels/src/components/setting_item_max.test.tsx
@@ -24,36 +24,28 @@ describe('components/SettingItemMax', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallow(
-            <SettingItemMax {...baseProps}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...baseProps}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, without submit', () => {
         const props = {...baseProps, submit: null};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, on clientError', () => {
         const props = {...baseProps, clientError: 'clientError'};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, on serverError', () => {
         const props = {...baseProps, serverError: 'serverError'};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
@@ -61,11 +53,14 @@ describe('components/SettingItemMax', () => {
     test('should have called updateSection on handleUpdateSection with section', () => {
         const updateSection = jest.fn();
         const props = {...baseProps, updateSection};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
+        const instance = wrapper.instance() as SettingItemMax;
+        const event = {
+            preventDefault: jest.fn(),
+        } as unknown as React.MouseEvent<HTMLButtonElement>;
+
+        instance.handleUpdateSection(event);
 
-        wrapper.instance().handleUpdateSection({preventDefault: jest.fn()});
         expect(updateSection).toHaveBeenCalled();
         expect(updateSection).toHaveBeenCalledWith('section');
     });
@@ -73,11 +68,15 @@ describe('components/SettingItemMax', () => {
     test('should have called updateSection on handleUpdateSection with empty string', () => {
         const updateSection = jest.fn();
         const props = {...baseProps, updateSection, section: ''};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
+
+        const instance = wrapper.instance() as SettingItemMax;
+        const event = {
+            preventDefault: jest.fn(),
+        } as unknown as React.MouseEvent<HTMLButtonElement>;
+
+        instance.handleUpdateSection(event);
 
-        wrapper.instance().handleUpdateSection({preventDefault: jest.fn()});
         expect(updateSection).toHaveBeenCalled();
         expect(updateSection).toHaveBeenCalledWith('');
     });
@@ -85,11 +84,14 @@ describe('components/SettingItemMax', () => {
     test('should have called submit on handleSubmit with setting', () => {
         const submit = jest.fn();
         const props = {...baseProps, submit};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
+        const instance = wrapper.instance() as SettingItemMax;
+        const event = {
+            preventDefault: jest.fn(),
+        } as unknown as React.MouseEvent<HTMLButtonElement>;
+
+        instance.handleSubmit(event);
 
-        wrapper.instance().handleSubmit({preventDefault: jest.fn()});
         expect(submit).toHaveBeenCalled();
         expect(submit).toHaveBeenCalledWith('setting');
     });
@@ -97,11 +99,14 @@ describe('components/SettingItemMax', () => {
     test('should have called submit on handleSubmit with empty string', () => {
         const submit = jest.fn();
         const props = {...baseProps, submit, setting: ''};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
+        const instance = wrapper.instance() as SettingItemMax;
+        const event = {
+            preventDefault: jest.fn(),
+        } as unknown as React.MouseEvent<HTMLButtonElement>;
+
+        instance.handleSubmit(event);
 
-        wrapper.instance().handleSubmit({preventDefault: jest.fn()});
         expect(submit).toHaveBeenCalled();
         expect(submit).toHaveBeenCalledWith();
     });
@@ -109,25 +114,43 @@ describe('components/SettingItemMax', () => {
     it('should have called submit on handleSubmit onKeyDown ENTER', () => {
         const submit = jest.fn();
         const props = {...baseProps, submit};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
-        const instance = wrapper.instance();
+        const wrapper = shallow(<SettingItemMax {...props}/>);
+        const instance = wrapper.instance() as SettingItemMax;
+
+        instance.onKeyDown({
+            preventDefault: jest.fn(),
+            key: Constants.KeyCodes.ENTER[0],
+            target: {
+                tagName: 'SELECT',
+                classList: {contains: jest.fn()},
+                parentElement: {className: 'react-select__input'},
+            },
+        } as unknown as KeyboardEvent);
 
-        instance.onKeyDown({preventDefault: jest.fn(), key: Constants.KeyCodes.ENTER[0], target: {tagName: 'SELECT', classList: {contains: jest.fn()}, parentElement: {className: 'react-select__input'}}});
         expect(submit).toHaveBeenCalledTimes(0);
 
-        instance.settingList.current = {contains: jest.fn(() => true)};
-        instance.onKeyDown({preventDefault: jest.fn(), key: Constants.KeyCodes.ENTER[0], target: {tagName: '', classList: {contains: jest.fn()}, parentElement: {className: ''}}});
+        instance.settingList = {
+            current: {
+                contains: jest.fn(() => true),
+            } as unknown as HTMLDivElement,
+        };
+        instance.onKeyDown({
+            preventDefault: jest.fn(),
+            key: Constants.KeyCodes.ENTER[0],
+            target: {
+                tagName: '',
+                classList: {contains: jest.fn()},
+                parentElement: {className: ''},
+            },
+        } as unknown as KeyboardEvent);
+
         expect(submit).toHaveBeenCalledTimes(1);
         expect(submit).toHaveBeenCalledWith('setting');
     });
 
     test('should match snapshot, with new saveTextButton', () => {
         const props = {...baseProps, saveButtonText: 'CustomText'};
-        const wrapper = shallow(
-            <SettingItemMax {...props}/>,
-        );
+        const wrapper = shallow(<SettingItemMax {...props}/>);
 
         expect(wrapper).toMatchSnapshot();
     });