Convert old tests to use "react-testing-library"

app/soapbox/features/ui/components/__tests__/__snapshots__/compose-button.test.js.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ComposeButton /> renders a button element 1`] = `
-<div
-  className="mt-4"
->
-  <button
-    className="inline-flex items-center border font-medium rounded-full focus:outline-none appearance-none transition-all border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2 px-6 py-3 text-base flex w-full justify-center"
-    disabled={false}
-    onClick={[Function]}
-    type="button"
-  >
-    <div
-      className="svg-icon mr-2"
-    >
-      <svg
-        id={
-          Object {
-            "process": [Function],
-          }
-        }
-      />
-    </div>
-    <span>
-      Compose
-    </span>
-  </button>
-</div>
-`;

app/soapbox/features/ui/components/__tests__/compose-button.test.js

@@ -1,26 +1,39 @@
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+import '@testing-library/jest-dom';
 
 import { MODAL_OPEN } from 'soapbox/actions/modals';
+import { mockStore } from 'soapbox/jest/test-helpers';
 import rootReducer from 'soapbox/reducers';
-import { createComponent, mockStore } from 'soapbox/test_helpers';
 
 import ComposeButton from '../compose-button';
 
+const store = mockStore(rootReducer(ImmutableMap(), {}));
+const renderComposeButton = () => {
+  render(
+    <Provider store={store}>
+      <IntlProvider locale='en'>
+        <ComposeButton />
+      </IntlProvider>
+    </Provider>,
+  );
+};
+
 describe('<ComposeButton />', () => {
   it('renders a button element', () => {
-    const component = createComponent(<ComposeButton />);
-    const tree = component.toJSON();
+    renderComposeButton();
 
-    expect(tree).toMatchSnapshot();
+    expect(screen.getByRole('button')).toHaveTextContent('Compose');
   });
 
   it('dispatches the MODAL_OPEN action', () => {
-    const store = mockStore(rootReducer(ImmutableMap(), {}));
-    const component = createComponent(<ComposeButton />, { store });
+    renderComposeButton();
 
     expect(store.getActions().length).toEqual(0);
-    component.root.findByType('button').props.onClick();
+    fireEvent.click(screen.getByRole('button'));
     expect(store.getActions()[0].type).toEqual(MODAL_OPEN);
   });
 });

app/soapbox/features/ui/containers/notifications_container.js

@@ -8,7 +8,7 @@ import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
 const CustomNotificationStack = (props) => (
-  <div role='assertive' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start'>
+  <div role='assertive' data-testid='toast' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start'>
     <NotificationStack {...props} />
   </div>
 );