fix(client): enzyme tests

client/src/templates/Challenges/utils/frame.js

@@ -9,11 +9,13 @@ import {
   timeout,
   catchError
 } from 'rxjs/operators';
-import { ShallowWrapper, ReactWrapper } from 'enzyme';
+import { configure, shallow, mount } from 'enzyme';
 import Adapter16 from 'enzyme-adapter-react-16';
-import { isJSEnabledSelector } from '../redux';
+import { setConfig } from 'react-hot-loader';
 import 'chai';
 
+import { isJSEnabledSelector } from '../redux';
+
 // we use two different frames to make them all essentially pure functions
 // main iframe is responsible rendering the preview and is where we proxy the
 // console.log
@@ -45,7 +47,12 @@ const createHeader = (id = mainId) => `
 export const runTestsInTestFrame = (document, tests) =>
   defer(() => {
     const { contentDocument: frame } = document.getElementById(testId);
-    return frame.__runTests(tests);
+    // Enable Stateless Functional Component. Otherwise, enzyme-adapter-react-16
+    // does not work correctly.
+    setConfig({ pureSFC: true });
+    return frame
+      .__runTests(tests)
+      .pipe(tap(() => setConfig({ pureSFC: false })));
   });
 
 const createFrame = (document, state, id) => ctx => {
@@ -120,18 +127,8 @@ const writeTestDepsToDocument = frameReady => ctx => {
   // add enzyme
   // TODO: do programatically
   // TODO: webpack lazyload this
-  ctx.document.Enzyme = {
-    shallow: (node, options) =>
-      new ShallowWrapper(node, null, {
-        ...options,
-        adapter: new Adapter16()
-      }),
-    mount: (node, options) =>
-      new ReactWrapper(node, null, {
-        ...options,
-        adapter: new Adapter16()
-      })
-  };
+  configure({ adapter: new Adapter16() });
+  ctx.document.Enzyme = { shallow, mount };
   // default for classic challenges
   // should not be used for modern
   ctx.document.__source = sources && 'index' in sources ? sources['index'] : '';