Add test to demonstrate testing React components

Author: Vinnl

jest.config.js

@@ -2,9 +2,12 @@ module.exports = {
   preset: 'ts-jest/presets/js-with-babel',
   testEnvironment: 'jsdom',
   collectCoverage: true,
+  setupFilesAfterEnv: [
+    '@testing-library/react/cleanup-after-each'
+  ],
   // For some reason Jest is not measuring coverage without the below option.
   // Unfortunately, despite `!(.test)`, it still measures coverage of test files as well:
-  forceCoverageMatch: ['**/*!(.test).ts'],
+  forceCoverageMatch: ['**/*!(.test).tsx?'],
   // Since we're only measuring coverage for TypeScript (i.e. added with test infrastructure in place),
   // we can be fairly strict. However, if you feel that something is not fit for coverage,
   // mention why in a comment and mark it as ignored:

markdown/__snapshots__/view.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit mode should properly render the edit form 1`] = `
+<div>
+  <form>
+    <textarea>
+      Arbitrary markdown
+    </textarea>
+    <button
+      type="submit"
+    >
+      RENDER
+    </button>
+    ,
+  </form>
+</div>
+`;
+
+exports[`should properly render markdown 1`] = `
+<div>
+  <form>
+    <p>
+      Some 
+      <strong>
+        awesome
+      </strong>
+       markdown
+    </p>
+    <button
+      type="submit"
+    >
+      EDIT
+    </button>
+  </form>
+</div>
+`;

markdown/actErrorWorkaround.ts

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+
+/* istanbul ignore next [This is a test helper, so it doesn't need to be tested itself] */
+/**
+ * This is a workaround for a bug that will be fixed in [email protected]
+ *
+ * The bug results in a warning being thrown about calls not being wrapped in `act()`
+ * when a component calls `setState` twice.
+ * More info about the issue: https://github.com/testing-library/react-testing-library/issues/281#issuecomment-480349256
+ * The PR that will fix it: https://github.com/facebook/react/pull/14853
+ */
+export function workaroundActError () {
+  const originalError = console.error
+  beforeAll(() => {
+    console.error = (...args) => {
+      if (/Warning.*not wrapped in act/.test(args[0])) {
+        return
+      }
+      originalError.call(console, ...args)
+    }
+  })
+
+  afterAll(() => {
+    console.error = originalError
+  })
+}

markdown/view.test.tsx

@@ -0,0 +1,44 @@
+/* eslint-env jest */
+import * as React from 'react'
+import {
+  render,
+  fireEvent
+} from '@testing-library/react'
+import { View } from './view'
+import { workaroundActError } from './actErrorWorkaround'
+
+workaroundActError()
+
+it('should properly render markdown', () => {
+  const { container } = render(<View markdown='Some **awesome** markdown' onSave={jest.fn()}/>)
+
+  expect(container).toMatchSnapshot()
+})
+
+describe('Edit mode', () => {
+  it('should properly render the edit form', () => {
+    const { container, getByRole } = render(<View markdown='Arbitrary markdown' onSave={jest.fn()}/>)
+
+    const editButton = getByRole('button')
+    editButton.click()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should call the onSave handler after saving the new content', () => {
+    const mockHandler = jest.fn().mockReturnValue(Promise.resolve())
+    const { getByRole, getByDisplayValue } = render(<View markdown='Arbitrary markdown' onSave={mockHandler}/>)
+
+    const editButton = getByRole('button')
+    editButton.click()
+
+    const textarea = getByDisplayValue('Arbitrary markdown')
+    fireEvent.change(textarea, { target: { value: 'Some _other_ markdown' } })
+
+    const renderButton = getByRole('button')
+    renderButton.click()
+
+    expect(mockHandler.mock.calls.length).toBe(1)
+    expect(mockHandler.mock.calls[0][0]).toBe('Some _other_ markdown')
+  })
+})

package-lock.json

@@ -77,6 +77,7 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@testing-library/react": "^8.0.1",
     "@types/jest": "^24.0.12",
     "@types/rdflib": "^0.20.0",
     "@types/react": "^16.8.19",