Merge pull request #11 from intelie/tests/react-display-names

Tests/react display names

.github/workflows/main.yml

@@ -17,7 +17,12 @@ jobs:
     steps:
     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
     - uses: actions/checkout@v2
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v2.4.0
+      with:
+        version: 12.1.0
     - name: Run tests
       run: |
-        npm install
-        npm test
+        npm install yarn -g
+        yarn install
+        yarn test

__tests__/__snapshots__/react-display-name.js.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react-display-name test suite Transforms class components 1`] = `
+"\\"use strict\\";
+
+function _typeof(obj) { \\"@babel/helpers - typeof\\"; if (typeof Symbol === \\"function\\" && typeof Symbol.iterator === \\"symbol\\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \\"function\\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \\"symbol\\" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require(\\"react\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== \\"function\\" && superClass !== null) { throw new TypeError(\\"Super expression must either be null or a function\\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \\"object\\" || typeof call === \\"function\\")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\\"this hasn't been initialised - super() hasn't been called\\"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === \\"undefined\\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \\"function\\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var MyClassComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(MyClassComponent, _React$Component);
+
+  var _super = _createSuper(MyClassComponent);
+
+  function MyClassComponent() {
+    _classCallCheck(this, MyClassComponent);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MyClassComponent, [{
+    key: \\"render\\",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
+    }
+  }]);
+
+  return MyClassComponent;
+}(_react.default.Component);
+
+MyClassComponent.displayName = \\"MyClassComponent\\";
+var _default = MyClassComponent;
+exports.default = _default;"
+`;
+
+exports[`react-display-name test suite Transforms function components 1`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require(\\"react\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function MyFunctionComponent() {
+  return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
+}
+
+MyFunctionComponent.displayName = \\"MyFunctionComponent\\";
+var _default = MyFunctionComponent;
+exports.default = _default;"
+`;
+
+exports[`react-display-name test suite Transforms function expression components 1`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require(\\"react\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MyFunctionExpressionComponent = function MyFunctionExpressionComponent() {
+  return /*#__PURE__*/_react.default.createElement(\\"div\\", null, \\"1\\");
+};
+
+MyFunctionExpressionComponent.displayName = \\"MyFunctionExpressionComponent\\";
+var _default = MyFunctionExpressionComponent;
+exports.default = _default;"
+`;

__tests__/react-display-name.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-eval */
+/* eslint-disable no-new-func */
+import { transformAsync } from '@babel/core'
+import babelOptions from '../babel.config'
+import React from 'react'
+
+const options = {
+    filename: 'file.tsx',
+    ...babelOptions
+}
+describe('react-display-name test suite', () => {
+    it('Transforms class components', async () => {
+        const classComponentInput = `
+            import React from 'react'
+
+            class MyClassComponent extends React.Component {
+                render() {
+                    return <div>1</div>
+                }
+            }
+            export default MyClassComponent
+        `
+
+        const { code: classComponentOutput } = await transformAsync(classComponentInput, {
+            ...options,
+            sourceType: 'module'
+        })
+
+        expect(classComponentOutput).toMatchSnapshot()
+        const MyComponent = eval(classComponentOutput)
+        const element = <MyComponent />
+
+        expect(element.type.displayName).toBe('MyClassComponent')
+    })
+
+    it('Transforms function components', async () => {
+        const classComponentInput = `
+            import React from 'react'
+
+            function MyFunctionComponent () {
+                return <div>1</div>
+            }
+            export default MyFunctionComponent
+        `
+
+        const { code: classComponentOutput } = await transformAsync(classComponentInput, {
+            ...options,
+            sourceType: 'module'
+        })
+
+        expect(classComponentOutput).toMatchSnapshot()
+        const MyComponent = eval(classComponentOutput)
+        const element = <MyComponent />
+
+        expect(element.type.displayName).toBe('MyFunctionComponent')
+    })
+
+    it('Transforms function expression components', async () => {
+        const classComponentInput = `
+            import React from 'react'
+
+            const MyFunctionExpressionComponent = () => {
+                return <div>1</div>
+            }
+            export default MyFunctionExpressionComponent
+        `
+
+        const { code: classComponentOutput } = await transformAsync(classComponentInput, {
+            ...options,
+            sourceType: 'module'
+        })
+
+        expect(classComponentOutput).toMatchSnapshot()
+        const MyComponent = eval(classComponentOutput)
+        const element = <MyComponent />
+
+        expect(element.type.displayName).toBe('MyFunctionExpressionComponent')
+    })
+})

babel.config.js

@@ -19,5 +19,5 @@ module.exports = {
             }
         ]
     ],
-    plugins: [require('babel-plugin-styled-components')]
+    plugins: [require('babel-plugin-styled-components'), require('babel-plugin-add-react-displayname')]
 }

package.json

@@ -14,7 +14,8 @@
   "scripts": {
     "build": "cp ./babel.config.js ./lib && babel src --out-dir lib",
     "prepublishOnly": "yarn run build",
-    "test": "jest"
+    "test": "jest",
+    "release": "npx np"
   },
   "dependencies": {
     "@babel/cli": "7.14.3",
@@ -24,6 +25,7 @@
     "@babel/preset-flow": "7.13.13",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
+    "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-const-enum": "1.0.1",
     "babel-plugin-styled-components": "1.12.0",
     "babel-preset-const-enum": "1.0.0"

yarn.lock

@@ -2024,6 +2024,11 @@ babel-jest@26.3.0, babel-jest@^26.3.0:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-plugin-add-react-displayname@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
+  integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
+
 babel-plugin-const-enum@1.0.1, babel-plugin-const-enum@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-const-enum/-/babel-plugin-const-enum-1.0.1.tgz#0d742faf9731be4f213c4d01d61fc4e93c44d159"