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 c06a68a10b)
This commit is contained in:
Sebastian Markbåge
2016-10-03 16:08:28 -07:00
committed by Paul O’Shannessy
parent 556bd43a26
commit 21a4e7a826
4 changed files with 31 additions and 0 deletions
+9
View File
@@ -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; } });
};
+4
View File
@@ -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;
+17
View File
@@ -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');
@@ -13,6 +13,7 @@
var ReactDOMFeatureFlags = {
useCreateElement: true,
useFiber: false,
};
module.exports = ReactDOMFeatureFlags;