fix(jest-preset-hops): Add support for importComponent in jest

packages/jest-preset/babel-plugin-import-component.js

@@ -0,0 +1,45 @@
+module.exports = function importComponentPlugin({ types: t }) {
+  return {
+    visitor: {
+      ImportSpecifier(path) {
+        if (
+          path.node.imported.name !== 'importComponent' ||
+          !['@untool/react', 'untool', 'hops', this.opts.module].includes(
+            path.parent.source.value
+          )
+        ) {
+          return;
+        }
+
+        path.scope.getBinding('importComponent').referencePaths.forEach(ref => {
+          if (!t.isCallExpression(ref.parentPath)) {
+            return;
+          }
+
+          const arg = ref.parentPath.get('arguments')[0];
+          t.assertObjectExpression(arg);
+          arg.traverse({
+            ObjectProperty(path) {
+              // Remove `require.resolveWeak`, which does not exist in jest
+              if (path.node.key.name === 'moduleId') {
+                path.node.value = t.numericLiteral(0);
+              }
+
+              if (path.node.key.name === 'load') {
+                const loadFunction = path.get('value');
+                t.assertArrowFunctionExpression(loadFunction);
+                const moduleName = loadFunction.get('body.arguments.0');
+
+                loadFunction
+                  .get('body')
+                  .replaceWithSourceString(
+                    `Promise.resolve(require(${moduleName}))`
+                  );
+              }
+            },
+          });
+        });
+      },
+    },
+  };
+};

packages/jest-preset/jest-preset.js

@@ -8,6 +8,9 @@ module.exports = {
     '^.+\\.css(\\?global)?$': 'identity-obj-proxy',
     '^hops$': 'hops/lib/runtime.js',
   },
+  globals: {
+    __webpack_modules__: {},
+  },
   moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
   testMatch: [
     ...defaults.testMatch,

packages/jest-preset/transforms/babel.js

@@ -1,4 +1,4 @@
-var babelJest = require('babel-jest');
+const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
   presets: [
@@ -17,6 +17,8 @@ module.exports = babelJest.createTransformer({
     require.resolve('babel-plugin-dynamic-import-node'),
     require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    [require.resolve('@untool/react/lib/babel'), { module: 'hops' }],
+    require.resolve('../babel-plugin-import-component'),
   ],
   babelrc: false,
 });

packages/spec/integration/jest-preset/__tests__/preset.js

@@ -23,4 +23,25 @@ describe('jest-preset', () => {
     const css = require('./setup/local-css');
     expect(css.default.foo).toBe('foo');
   });
+
+  it('allows to use importComponent', done => {
+    const React = require('react');
+    const renderer = require('react-test-renderer');
+    const Component = require('./setup/import-component').default;
+    const { MemoryRouter } = require('react-router-dom');
+
+    const rendered = renderer.create(
+      <MemoryRouter>
+        <Component />
+      </MemoryRouter>
+    );
+
+    expect(rendered.root.findAllByType('h1').length).toBe(0);
+
+    window.setTimeout(() => {
+      expect(rendered.root.findAllByType('h1')[0].children[0]).toEqual('hello');
+      expect(rendered.root.findAllByType('h1')[1].children[0]).toEqual('bye');
+      done();
+    }, 0);
+  });
 });

packages/spec/integration/jest-preset/__tests__/setup/import-component.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { importComponent } from 'hops';
+
+const Text = importComponent('./text');
+const AnotherText = importComponent('./text');
+
+const TextContainer = () => {
+  return (
+    <div>
+      <Text text="hello" />
+      <AnotherText text="bye" />
+    </div>
+  );
+};
+
+export default TextContainer;

packages/spec/integration/jest-preset/__tests__/setup/text.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Text = ({ text }) => {
+  return <h1>{text}</h1>;
+};
+
+export default Text;