Set-up React Testing Library and write first test

package.json

@@ -72,6 +72,9 @@
     "tinymce": "^4.9.4"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^10.4.9",
+    "@testing-library/user-event": "^12.1.3",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.15.3",
     "es6-plato": "^1.1.6",
@@ -87,7 +90,7 @@
     "typescript": "^3.9.7"
   },
   "jest": {
-    "resetMocks": true,
+    "clearMocks": true,
     "transformIgnorePatterns": [
       "/node_modules/(?!lodash-es)/.*"
     ]

src/setupTests.js

+import '@testing-library/jest-dom/extend-expect';
+
+// Monkey-patch `console.warn` to silence React methods deprecation warning
+// => remove once Bootstrap and `react-bootstrap` have been updated
+const warn = console.warn;
+console.warn = (param, ...rest) => {
+  if (
+    typeof param !== 'string' ||
+    !/(componentWillMount|componentWillReceiveProps)/.test(param)
+  ) {
+    warn(param, ...rest);
+  }
+};

src/test-utils.js

+import React from 'react';
+import { render } from '@testing-library/react';
+import { CacheProvider } from 'rest-hooks';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import promise from 'redux-promise-middleware';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import reducers from './reducers';
+import App from './App';
+
+export function renderApp(ui, options = {}) {
+  const { initialState, initialRoute = '/', ...renderOptions } = options;
+
+  const store = createStore(
+    reducers,
+    applyMiddleware(thunk, promise),
+    initialState
+  );
+
+  function Wrapper() {
+    return (
+      <CacheProvider>
+        <Provider store={store}>
+          <MemoryRouter initialEntries={[initialRoute]}>
+            <App />
+          </MemoryRouter>
+        </Provider>
+      </CacheProvider>
+    );
+  }
+
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// Re-export everything to allow importing RTL functions through `test-utils`
+export * from '@testing-library/react';

src/tests/App.test.js

-// import React from 'react';
-// import ReactDOM from 'react-dom';
-// import App from './App';
+import { renderApp } from '../test-utils';
 
-// it('renders without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<App />, div);
-//   ReactDOM.unmountComponentAtNode(div);
-// });
-
-it('fake test ', () => {
-  expect(true).toBe(true);
+test('renders login page', () => {
+  const { queryByRole } = renderApp();
+  expect(queryByRole('heading', { name: 'Sign in' })).toBeTruthy();
 });