Fixed raw-loader + Jest problem

Author: Brian Vaughn

.eslintrc

@@ -12,6 +12,7 @@
   },
   "globals": {
     "__DEV__": "readonly",
+    "__TEST__": "readonly",
     "jasmine": "readonly",
     "spyOn": "readonly"
   }

flow.js

@@ -18,6 +18,7 @@ declare module 'events' {
 }
 
 declare var __DEV__: boolean;
+declare var __TEST__: boolean;
 
 declare var jasmine: {|
   getEnv: () => {|

packages/react-devtools-core/webpack.backend.js

@@ -35,6 +35,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: true,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),

packages/react-devtools-core/webpack.standalone.js

@@ -34,6 +34,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: false,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

packages/react-devtools-inline/webpack.config.js

@@ -38,7 +38,8 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: __DEV__,
+      __DEV__,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

shells/browser/shared/webpack.backend.js

@@ -31,6 +31,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: true,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),

shells/browser/shared/webpack.config.js

@@ -36,6 +36,7 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__: false,
+      __TEST__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,

shells/dev/webpack.config.js

@@ -39,7 +39,8 @@ const config = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: __DEV__,
+      __DEV__,
+      __TEST__: false,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),

src/__tests__/setupEnv.js

@@ -12,3 +12,4 @@ if (!global.hasOwnProperty('localStorage')) {
 
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__TEST__ = process.env.NODE_ENV === 'test';

src/constants.js

@@ -1,26 +1,8 @@
 // @flow
 
-// $FlowFixMe Cannot resolve module
-import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax
-
 // Flip this flag to true to enable verbose console debug logging.
 export const __DEBUG__ = false;
 
-const extractVar = varName => {
-  const regExp = new RegExp(`${varName}: ([0-9]+)`);
-  const match = rawStyleString.match(regExp);
-  return parseInt(match[1], 10);
-};
-
-// TRICKY
-// Extracting during build time avoids a temporarily invalid state for the inline target.
-// Sometimes the inline target is rendered before root styles are applied,
-// which would result in e.g. NaN itemSize being passed to react-window list.
-export const COMFORTABLE_LINE_HEIGHT = extractVar(
-  'comfortable-line-height-data'
-);
-export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
-
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
@@ -45,3 +27,31 @@ export const PROFILER_EXPORT_VERSION = 4;
 
 export const CHANGE_LOG_URL =
   'https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md';
+
+// HACK
+//
+// Extracting during build time avoids a temporarily invalid state for the inline target.
+// Sometimes the inline target is rendered before root styles are applied,
+// which would result in e.g. NaN itemSize being passed to react-window list.
+//
+// We can't use the Webpack loader syntax in the context of Jest though,
+// so tests need some reasonably meaningful fallback value.
+let COMFORTABLE_LINE_HEIGHT = 15;
+let COMPACT_LINE_HEIGHT = 10;
+
+if (!__TEST__) {
+  // $FlowFixMe
+  const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax
+    .default;
+
+  const extractVar = varName => {
+    const regExp = new RegExp(`${varName}: ([0-9]+)`);
+    const match = rawStyleString.match(regExp);
+    return parseInt(match[1], 10);
+  };
+
+  COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
+  COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
+}
+
+export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };