feat(test): Switch to @testing-library/react (#73)

Want to switch over from `enzyme` to `@testing-library/react` for testing React components.

- Removed `enzyme` (and related packages)
- Added [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro) (and related packages)
- Upgraded `jest`, `@types/jest` & `babel-jest`
- Including [`@testing-library/jest-dom/extend-expect`](https://github.com/testing-library/jest-dom) in jest spec setup to get additional `expect()` matchers

BREAKING CHANGE: `enzyme` is no longer supported for React component testing

README.md

@@ -107,7 +107,7 @@ The CLI has been tested to work in Node 8+.
 - [TypeScript](https://www.typescriptlang.org/) (type-checking)
 - [Babel](https://babeljs.io/) (transpiling)
 - [Jest](https://jestjs.io/en) (testing & code coverage)
-- [Enzyme](https://github.com/airbnb/enzyme) (testing React components)
+- [React testing library](https://testing-library.com/docs/react-testing-library/intro) (testing React components)
 - [ESLint](http://eslint.org/) (linting)
 - [Yargs](https://github.com/yargs/yargs) (command line argument parsing)
 

integration-tests/src/react/__tests__/Button.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, fireEvent } from '@testing-library/react'
 
 import Button from '../Button'
 
 test('calls onClick prop when <button> is clicked', () => {
   const onClick = jest.fn()
-  const button = mount(<Button onClick={onClick}>Go!</Button>)
+  const { getByText } = render(<Button onClick={onClick}>Go!</Button>)
 
-  button.simulate('click')
+  fireEvent.click(getByText('Go!'))
 
   expect(onClick).toHaveBeenCalledWith()
   expect(onClick).toHaveBeenCalledTimes(1)

integration-tests/src/react/__tests__/Counter.spec.tsx

@@ -1,33 +1,24 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { act } from 'react-dom/test-utils'
+import { render, fireEvent } from '@testing-library/react'
 
 import Counter from '../Counter'
-import Button from '../Button'
 
 test('starts off at 0 by default', () => {
-  const counter = mount(<Counter />)
+  const { queryByText } = render(<Counter />)
 
-  expect(counter).toIncludeText('You clicked 0 times')
+  expect(queryByText('You clicked 0 times')).toBeInTheDocument()
 })
 
 test('can have a different initial value', () => {
-  const counter = mount(<Counter initialCount={14} />)
+  const { queryByText } = render(<Counter initialCount={14} />)
 
-  expect(counter).toIncludeText('You clicked 14 times')
+  expect(queryByText('You clicked 14 times')).toBeInTheDocument()
 })
 
 test('updates count when Button is clicked', () => {
-  const counter = mount(<Counter initialCount={5} />)
-  const button = counter.find(Button)
-  const buttonOnClick = button.prop('onClick')
-
-  if (buttonOnClick) {
-    // simulate clicking the button by trigger onClick prop of <Button />
-    act(() => {
-      buttonOnClick()
-    })
-  }
-
-  expect(counter).toIncludeText('You clicked 6 times')
+  const { queryByText, getByText } = render(<Counter initialCount={5} />)
+
+  fireEvent.click(getByText('Click me'))
+
+  expect(queryByText('You clicked 6 times')).toBeInTheDocument()
 })