From 21a4e7a826f8b605735e23415e161cee03ccd003 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 10 Aug 2016 17:44:36 -0700 Subject: [PATCH] Mock ReactDOM for Fiber Tests (#7206) We currently write all our tests against the DOM implementation. I need a way to run the Fiber tests against it. But I don't want to take on any package dependencies on Fiber modules yet. There's a problem with jest right now where you can't globally mock modules that already exist. So I have to add a global call to jest.mock. Luckily we already have a way to test the useCreateElement paths using a feature flag. I won't activate this flag in travis until it passes, but the idea is to run all three variants in travis. I'm not sure that invoking rAF and rIC synchronously is the best way to test this since it doesn't capture the backwards compatibility aspect. I.e. the fact that people might be relying on the synchronous nature in real apps too. It's a start. Ideally, jest would have these built-in. (cherry picked from commit c06a68a10b8c43922acff58dcad803412954bca0) --- scripts/jest/environment.js | 9 +++++++++ scripts/jest/test-framework-setup.js | 4 ++++ src/renderers/dom/__mocks__/ReactDOM.js | 17 +++++++++++++++++ .../dom/shared/ReactDOMFeatureFlags.js | 1 + 4 files changed, 31 insertions(+) create mode 100644 src/renderers/dom/__mocks__/ReactDOM.js diff --git a/scripts/jest/environment.js b/scripts/jest/environment.js index edc810072c..6b0c38fe49 100644 --- a/scripts/jest/environment.js +++ b/scripts/jest/environment.js @@ -1,2 +1,11 @@ /* eslint-disable */ global.__DEV__ = true; + +// For testing DOM Fiber, we synchronously invoke all the scheduling. +global.requestAnimationFrame = function(callback) { + callback(); +}; + +global.requestIdleCallback = function(callback) { + callback({ timeRemaining() { return Infinity; } }); +}; diff --git a/scripts/jest/test-framework-setup.js b/scripts/jest/test-framework-setup.js index 141b0fa836..f90d4cbe48 100644 --- a/scripts/jest/test-framework-setup.js +++ b/scripts/jest/test-framework-setup.js @@ -1,5 +1,9 @@ 'use strict'; +// We want to globally mock this but jest doesn't let us do that by default +// for a file that already exists. So we have to explicitly mock it. +jest.mock('ReactDOM'); + var env = jasmine.getEnv(); var callCount = 0; diff --git a/src/renderers/dom/__mocks__/ReactDOM.js b/src/renderers/dom/__mocks__/ReactDOM.js new file mode 100644 index 0000000000..00d14eb7f1 --- /dev/null +++ b/src/renderers/dom/__mocks__/ReactDOM.js @@ -0,0 +1,17 @@ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); + +var useFiber = ReactDOMFeatureFlags.useFiber; + +module.exports = + useFiber ? require('ReactDOMFiber') : require.requireActual('ReactDOM'); diff --git a/src/renderers/dom/shared/ReactDOMFeatureFlags.js b/src/renderers/dom/shared/ReactDOMFeatureFlags.js index f27e854190..5e9d93267c 100644 --- a/src/renderers/dom/shared/ReactDOMFeatureFlags.js +++ b/src/renderers/dom/shared/ReactDOMFeatureFlags.js @@ -13,6 +13,7 @@ var ReactDOMFeatureFlags = { useCreateElement: true, + useFiber: false, }; module.exports = ReactDOMFeatureFlags;