diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js
index 9ed7b146..4b2b0dd1 100644
--- a/src/servers/DeleteServerButton.js
+++ b/src/servers/DeleteServerButton.js
@@ -2,32 +2,40 @@ import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DeleteServerModal from './DeleteServerModal';
+import { serverType } from './prop-types';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  server: serverType,
+  className: PropTypes.string,
+};
 
 export default class DeleteServerButton extends React.Component {
   state = { isModalOpen: false };
 
   render() {
-    const { server } = this.props;
+    const { server, className } = this.props;
 
-    return [
-      (
+    return (
+      <React.Fragment>
         <span
-          className={this.props.className}
+          className={className}
           onClick={() => this.setState({ isModalOpen: true })}
           key="deleteServerBtn"
         >
           <FontAwesomeIcon icon={deleteIcon} />
           <span className="aside-menu__item-text">Delete this server</span>
         </span>
-      ),
-      (
+
         <DeleteServerModal
           isOpen={this.state.isModalOpen}
           toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
           server={server}
           key="deleteServerModal"
         />
-      )
-    ];
+      </React.Fragment>
+    );
   }
 }
+
+DeleteServerButton.propTypes = propTypes;
diff --git a/test/servers/DeleteServerButton.test.js b/test/servers/DeleteServerButton.test.js
new file mode 100644
index 00000000..d6fb142e
--- /dev/null
+++ b/test/servers/DeleteServerButton.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import DeleteServerButton from '../../src/servers/DeleteServerButton';
+import { shallow } from 'enzyme';
+import DeleteServerModal from '../../src/servers/DeleteServerModal';
+
+describe('<DeleteServerButton />', () => {
+  let wrapper;
+
+  beforeEach(() =>
+      wrapper = shallow(<DeleteServerButton server={{}} className="button" />));
+  afterEach(() => wrapper.unmount());
+
+  it('renders a button and a modal', () => {
+    expect(wrapper.find('.button')).toHaveLength(1);
+    expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
+  });
+
+  it('displays modal when button is clicked', () => {
+    const btn = wrapper.find('.button');
+
+    expect(wrapper.state('isModalOpen')).toEqual(false);
+    btn.simulate('click');
+    expect(wrapper.state('isModalOpen')).toEqual(true);
+  });
+
+  it('changes modal open state when toggled', () => {
+    const modal = wrapper.find(DeleteServerModal);
+
+    expect(wrapper.state('isModalOpen')).toEqual(false);
+    modal.prop('toggle')();
+    expect(wrapper.state('isModalOpen')).toEqual(true);
+  });
+});