♻️ Use react-testing-library instead of enzyme.

Author: aofleejay

twitter/package.json

@@ -29,14 +29,8 @@
     ]
   },
   "devDependencies": {
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.1.4",
     "prettier": "^1.18.2"
-  },
-  "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
   }
 }

twitter/src/Twitter.js

@@ -17,23 +17,29 @@ class Twitter extends Component {
       { tweets: [...this.state.tweets, { text: this.state.inputText }] },
       () => {
         this.setState({ inputText: '' })
-      }
+      },
     )
   }
 
   render() {
     return (
-      <div id="twitter-board" className="twitter-board">
+      <div
+        id="twitter-board"
+        data-testid="twitter-board"
+        className="twitter-board"
+      >
         <form id="tweet-form" onSubmit={this.submitTweet}>
           <input
             id="tweet-text"
+            data-testid="tweet-text"
             className="tweet-text"
             type="text"
             value={this.state.inputText}
             onChange={this.onTextChange}
           />
           <input
             id="tweet-button"
+            data-testid="tweet-button"
             className="tweet-button"
             type="submit"
             value="tweet"

twitter/src/Twitter.test.js

@@ -1,20 +1,22 @@
 import React from 'react'
-import { shallow, mount } from 'enzyme'
+import { render, fireEvent } from '@testing-library/react'
 import Twitter from './Twitter'
 
 it('Contain twitter board.', () => {
-  const wrapper = shallow(<Twitter />)
+  const { getByTestId } = render(<Twitter />)
 
-  expect(wrapper.find('#twitter-board')).toHaveLength(1)
+  expect(getByTestId('twitter-board')).toBeVisible()
 })
 
 it('Render a tweet after simulate submit tweet event.', () => {
   const event = { target: { value: 'Hello' } }
-  const wrapper = mount(<Twitter />)
+  const { getByTestId, getByText } = render(<Twitter />)
 
-  wrapper.find('#tweet-text').simulate('change', event)
-  wrapper.find('#tweet-button').simulate('submit')
+  const tweetTextInput = getByTestId('tweet-text')
+  fireEvent.change(tweetTextInput, event)
+  const tweetButton = getByTestId('tweet-button')
+  fireEvent.click(tweetButton)
 
-  expect(wrapper.find('.tweet-item')).toHaveLength(1)
-  expect(wrapper.find('#tweet-text').props().value).toEqual('')
+  expect(getByText('Hello')).toBeVisible()
+  expect(tweetTextInput).toHaveTextContent('')
 })

twitter/src/setupTests.js

@@ -1,4 +1 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
-
-Enzyme.configure({ adapter: new Adapter() })
+import '@testing-library/jest-dom/extend-expect'