Fixed raw-loader + Jest problem
Brian Vaughn committed
Aug 12, 2019 at 08:49 UTC
8001b6432c203ee46d8bbcb4099bef79856107d7
10 files changed
+39
-20
.eslintrc
+1
@@ -12,6 +12,7 @@
12
},
13
"globals": {
14
"__DEV__": "readonly",
15
+ "__TEST__": "readonly",
16
"jasmine": "readonly",
17
"spyOn": "readonly"
18
}
flow.js
+1
@@ -18,6 +18,7 @@ declare module 'events' {
18
}
19
20
declare var __DEV__: boolean;
21
+declare var __TEST__: boolean;
22
23
declare var jasmine: {|
24
getEnv: () => {|
packages/react-devtools-core/webpack.backend.js
+1
@@ -35,6 +35,7 @@ module.exports = {
35
plugins: [
36
new DefinePlugin({
37
__DEV__: true,
38
+ __TEST__: false,
39
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
40
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
41
}),
packages/react-devtools-core/webpack.standalone.js
+1
@@ -34,6 +34,7 @@ module.exports = {
34
plugins: [
35
new DefinePlugin({
36
__DEV__: false,
37
+ __TEST__: false,
38
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
39
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
40
'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-inline/webpack.config.js
+2
-1
@@ -38,7 +38,8 @@ module.exports = {
38
},
39
plugins: [
40
new DefinePlugin({
41
- __DEV__: __DEV__,
41
+ __DEV__,
42
+ __TEST__: false,
43
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
44
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
45
'process.env.NODE_ENV': `"${NODE_ENV}"`,
shells/browser/shared/webpack.backend.js
+1
@@ -31,6 +31,7 @@ module.exports = {
31
plugins: [
32
new DefinePlugin({
33
__DEV__: true,
34
+ __TEST__: false,
35
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
36
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
37
}),
shells/browser/shared/webpack.config.js
+1
@@ -36,6 +36,7 @@ module.exports = {
36
plugins: [
37
new DefinePlugin({
38
__DEV__: false,
39
+ __TEST__: false,
40
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
41
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
42
'process.env.NODE_ENV': `"${NODE_ENV}"`,
shells/dev/webpack.config.js
+2
-1
@@ -39,7 +39,8 @@ const config = {
39
},
40
plugins: [
41
new DefinePlugin({
42
- __DEV__: __DEV__,
42
+ __DEV__,
43
+ __TEST__: false,
44
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
45
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
46
}),
src/__tests__/setupEnv.js
+1
@@ -12,3 +12,4 @@ if (!global.hasOwnProperty('localStorage')) {
12
13
// Mimic the global we set with Webpack's DefinePlugin
14
global.__DEV__ = process.env.NODE_ENV !== 'production';
15
+global.__TEST__ = process.env.NODE_ENV === 'test';
src/constants.js
+28
-18
@@ -1,26 +1,8 @@
1
// @flow
2
3
-// $FlowFixMe Cannot resolve module
4
-import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax
5
-
3
// Flip this flag to true to enable verbose console debug logging.
4
export const __DEBUG__ = false;
5
9
-const extractVar = varName => {
10
- const regExp = new RegExp(`${varName}: ([0-9]+)`);
11
- const match = rawStyleString.match(regExp);
12
- return parseInt(match[1], 10);
13
-};
14
-
15
-// TRICKY
16
-// Extracting during build time avoids a temporarily invalid state for the inline target.
17
-// Sometimes the inline target is rendered before root styles are applied,
18
-// which would result in e.g. NaN itemSize being passed to react-window list.
19
-export const COMFORTABLE_LINE_HEIGHT = extractVar(
20
- 'comfortable-line-height-data'
21
-);
22
-export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
23
-
6
export const TREE_OPERATION_ADD = 1;
7
export const TREE_OPERATION_REMOVE = 2;
8
export const TREE_OPERATION_REORDER_CHILDREN = 3;
@@ -45,3 +27,31 @@ export const PROFILER_EXPORT_VERSION = 4;
27
28
export const CHANGE_LOG_URL =
29
'https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md';
30
+
31
+// HACK
32
+//
33
+// Extracting during build time avoids a temporarily invalid state for the inline target.
34
+// Sometimes the inline target is rendered before root styles are applied,
35
+// which would result in e.g. NaN itemSize being passed to react-window list.
36
+//
37
+// We can't use the Webpack loader syntax in the context of Jest though,
38
+// so tests need some reasonably meaningful fallback value.
39
+let COMFORTABLE_LINE_HEIGHT = 15;
40
+let COMPACT_LINE_HEIGHT = 10;
41
+
42
+if (!__TEST__) {
43
+ // $FlowFixMe
44
+ const rawStyleString = require('!!raw-loader!src/devtools/views/root.css') // eslint-disable-line import/no-webpack-loader-syntax
45
+ .default;
46
+
47
+ const extractVar = varName => {
48
+ const regExp = new RegExp(`${varName}: ([0-9]+)`);
49
+ const match = rawStyleString.match(regExp);
50
+ return parseInt(match[1], 10);
51
+ };
52
+
53
+ COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
54
+ COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
55
+}
56
+
57
+export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };