Add "react-testing-library"

This commit also removes our older testing libraries like Enzyme and React Test Renderer.

app/soapbox/jest/test-helpers.tsx

@@ -0,0 +1,72 @@
+import { render, RenderOptions } from '@testing-library/react';
+import { merge } from 'immutable';
+import React, { FC, ReactElement } from 'react';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { Action, applyMiddleware, createStore } from 'redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import '@testing-library/jest-dom';
+
+import NotificationsContainer from '../features/ui/containers/notifications_container';
+import { default as rootReducer } from '../reducers';
+
+// Mock Redux
+// https://redux.js.org/recipes/writing-tests/
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+let rootState = rootReducer(undefined, {} as Action);
+
+// Apply actions to the state, one at a time
+const applyActions = (state: any, actions: any, reducer: any) => {
+  return actions.reduce((state: any, action: any) => reducer(state, action), state);
+};
+
+const createTestStore = (initialState: any) => createStore(rootReducer, initialState, applyMiddleware(thunk));
+
+const TestApp: FC<any> = ({ children, storeProps, routerProps = {} }) => {
+  let store: any;
+
+  if (storeProps) {
+    rootState = merge(rootState, storeProps);
+    store = createTestStore(rootState);
+  } else {
+    store = createTestStore(rootState);
+  }
+
+  const props = {
+    locale: 'en',
+    store,
+  };
+
+  return (
+    <Provider store={props.store}>
+      <IntlProvider locale={props.locale}>
+        <MemoryRouter {...routerProps}>
+          {children}
+
+          <NotificationsContainer />
+        </MemoryRouter>
+      </IntlProvider>
+    </Provider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+  store?: any,
+  routerProps?: any,
+) => render(ui, {
+  wrapper: () => <TestApp children={ui} storeProps={store} routerProps={routerProps} />,
+  ...options,
+});
+
+export * from '@testing-library/react';
+export {
+  customRender as render,
+  mockStore,
+  applyActions,
+  rootState,
+};

app/soapbox/jest/test-setup.ts

@@ -0,0 +1,10 @@
+'use strict';
+
+import { __clear as clearApiMocks } from '../__mocks__/api';
+
+// API mocking
+jest.mock('soapbox/api');
+afterEach(() => clearApiMocks());
+
+// Mock external dependencies
+jest.mock('uuid', () => ({ v4: jest.fn(() => 1) }));

app/soapbox/test_helpers.js

@@ -1,61 +0,0 @@
-'use strict';
-
-import { mount } from 'enzyme';
-import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-
-import rootReducer from 'soapbox/reducers';
-
-export const rootState = rootReducer(undefined, {});
-export const getState = () => rootState;
-
-// Mock Redux
-// https://redux.js.org/recipes/writing-tests/
-const middlewares = [thunk];
-export const mockStore = configureMockStore(middlewares);
-
-// Create test component with i18n and Redux store, etc
-export const createComponent = (children, props = {}) => {
-  props = ImmutableMap({
-    locale: 'en',
-    store: mockStore(rootState),
-  }).merge(props);
-
-  return renderer.create(
-    <Provider store={props.get('store')}>
-      <IntlProvider locale={props.get('locale')}>
-        <BrowserRouter>
-          {children}
-        </BrowserRouter>
-      </IntlProvider>
-    </Provider>,
-  );
-};
-
-export const createShallowComponent = (children, props = {}, routerProps = {}) => {
-  props = ImmutableMap({
-    locale: 'en',
-    store: mockStore(rootReducer(ImmutableMap(), {})),
-  }).merge(props);
-
-  return mount(
-    <Provider store={props.get('store')}>
-      <IntlProvider locale={props.get('locale')}>
-        <MemoryRouter {...routerProps}>
-          {children}
-        </MemoryRouter>
-      </IntlProvider>
-    </Provider>,
-  );
-};
-
-// Apply actions to the state, one at a time
-export const applyActions = (state, actions, reducer) => {
-  return actions.reduce((state, action) => reducer(state, action), state);
-};

app/soapbox/test_setup.js

@@ -1,16 +0,0 @@
-'use strict';
-
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-import { __clear as clearApiMocks } from 'soapbox/api';
-
-// Enzyme
-const adapter = new Adapter();
-configure({ adapter });
-
-// API mocking
-jest.mock('soapbox/api');
-afterEach(() => clearApiMocks());
-
-jest.mock('uuid', () => ({ v4: jest.fn(() => 1) }));