feat(react-intl): update react-intl to v4.x

changes
- update react-intl plugin to v4
- remove react-intl plugin patch. Plugin v4.x supports extracting from intl.formatMessage.
- move react-intl plugin tests to preset

Author: Mayank1791989

package.json

@@ -41,7 +41,7 @@
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "7.5.4",
-    "babel-plugin-react-intl": "3.0.1",
+    "babel-plugin-react-intl": "4.1.0",
     "flow-runtime": "0.17.0",
     "lodash": "4.17.14"
   },

src/__tests__/__snapshots__/react-test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`support react-intl correctly throw invalid intl message error 1`] = `
+"/test-file.js: [React Intl] Message failed to parse. See: http://formatjs.io/guides/message-syntax/
+SyntaxError: Expected \\"'\\", \\"\\\\\\\\#\\", \\"\\\\\\\\\\\\\\\\\\", \\"\\\\\\\\u\\", \\"\\\\\\\\{\\", \\"\\\\\\\\}\\", \\"}\\", or [^{,},\\\\\\\\,\\\\0-\\\\x1F,\\\\x7F, ,\\\\t,\\\\n,\\\\r] but end of input found.
+   6 |             <FormattedMessage
+   7 |               id=\\"test.xyz\\"
+>  8 |               defaultMessage=\\"{xyz, select, y {test}\\"
+     |                              ^
+   9 |             />
+  10 |           );
+  11 |         "
+`;

src/__tests__/react-test.js

@@ -1,5 +1,6 @@
 /* @flow */
 import { testParseCode, transform } from './test-utils';
+import stripAnsi from 'strip-ansi';
 
 testParseCode('react jsx', {
   opts: [undefined, { react: true }],
@@ -79,6 +80,8 @@ var test = function test() {
 
 describe('support react-intl', () => {
   const code = `
+    import { FormattedMessage } from 'react-intl';
+
     const component = () => {
       <div>
         <FormattedMessage id="some_id" defaultMessage="Some message" />
@@ -95,4 +98,63 @@ describe('support react-intl', () => {
     const result = transform(code, { reactIntl: false });
     expect(result.metadata['react-intl']).not.toBeDefined();
   });
+
+  describe('should able to extract messages', () => {
+    it('<FormattedMessage />', () => {
+      const result = transform(code);
+      expect(result.metadata['react-intl']).toEqual({
+        messages: [
+          {
+            id: 'some_id',
+            description: undefined,
+            defaultMessage: 'Some message',
+          },
+        ],
+      });
+    });
+
+    test('intl.formatMessage', () => {
+      const result = transform(`
+      const component = () => {
+        return (
+          <div>
+            {this.props.intl.formatMessage({
+              id: "some_id",
+              defaultMessage: "Some message",
+            })}
+          </div>
+        );
+      }
+    `);
+      expect(result.metadata['react-intl']).toEqual({
+        messages: [
+          {
+            id: 'some_id',
+            description: undefined,
+            defaultMessage: 'Some message',
+          },
+        ],
+      });
+    });
+  });
+
+  test('correctly throw invalid intl message error', () => {
+    expect(() => {
+      try {
+        transform(`
+          import React from 'react';
+          import { FormattedMessage } from 'react-intl';
+
+          const Component = (
+            <FormattedMessage
+              id="test.xyz"
+              defaultMessage="{xyz, select, y {test}"
+            />
+          );
+        `);
+      } catch (err) {
+        throw new Error(stripAnsi(err.message));
+      }
+    }).toThrowErrorMatchingSnapshot();
+  });
 });