diff --git a/client/src/templates/Challenges/utils/frame.js b/client/src/templates/Challenges/utils/frame.js index 201768e9eb..3b3aebfbfa 100644 --- a/client/src/templates/Challenges/utils/frame.js +++ b/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'] : '';