Skip to content

Commit a637084

Browse files
author
Brian Vaughn
authored
DevTools: Add Jest snapshot serializer for number formatting (facebook#23139)
Numbers in JavaScript can have precision issues due to how they are encoded. This shows up in snapshot tests sometimes with values like 0.0009999999999999992, which makes the tests hard to read and visually diff. This PR adds a new snapshot serializers which clamps numbers at 3 decimal points (e.g. the above number 0.0009999999999999992 is serialized as 0.001). This new serializer does not impact non-numeric values, integers, and special numbers like NaN and Infinity.
1 parent 505c15c commit a637084

10 files changed

+57
-30
lines changed

‎packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js renamed to ‎packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js

File renamed without changes.

‎packages/react-devtools-shared/src/__tests__/hookSerializer.js renamed to ‎packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js

File renamed without changes.

‎packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js renamed to ‎packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js

File renamed without changes.

‎packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const MAX_DECIMAL_PLACES = 3;
2+
3+
// test() is part of Jest's serializer API
4+
export function test(maybeNumber) {
5+
return (
6+
typeof maybeNumber === 'number' &&
7+
Number.isFinite(maybeNumber) &&
8+
!Number.isInteger(maybeNumber) &&
9+
!Number.isNaN(maybeNumber)
10+
);
11+
}
12+
13+
// print() is part of Jest's serializer API
14+
export function print(number, serialize, indent) {
15+
const string = number.toString();
16+
const pieces = string.split('.');
17+
if (pieces.length === 2) {
18+
if (pieces[1].length > MAX_DECIMAL_PLACES) {
19+
return number.toFixed(MAX_DECIMAL_PLACES);
20+
}
21+
}
22+
23+
return string;
24+
}

‎packages/react-devtools-shared/src/__tests__/storeSerializer.js renamed to ‎packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js

File renamed without changes.

‎packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js renamed to ‎packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js

File renamed without changes.

‎packages/react-devtools-shared/src/__tests__/preprocessData-test.js

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,7 @@ describe('Timeline profiler', () => {
439439
Object {
440440
"batchUID": 0,
441441
"depth": 0,
442-
"duration": 0.004999999999999999,
442+
"duration": 0.005,
443443
"lanes": Array [
444444
9,
445445
],
@@ -459,7 +459,7 @@ describe('Timeline profiler', () => {
459459
Object {
460460
"batchUID": 0,
461461
"depth": 0,
462-
"duration": 0.002999999999999999,
462+
"duration": 0.003,
463463
"lanes": Array [
464464
9,
465465
],
@@ -469,7 +469,7 @@ describe('Timeline profiler', () => {
469469
Object {
470470
"batchUID": 0,
471471
"depth": 1,
472-
"duration": 0.0010000000000000009,
472+
"duration": 0.001,
473473
"lanes": Array [
474474
9,
475475
],
@@ -529,7 +529,7 @@ describe('Timeline profiler', () => {
529529
Object {
530530
"batchUID": 0,
531531
"depth": 0,
532-
"duration": 0.004999999999999999,
532+
"duration": 0.005,
533533
"lanes": Array [
534534
9,
535535
],
@@ -549,7 +549,7 @@ describe('Timeline profiler', () => {
549549
Object {
550550
"batchUID": 0,
551551
"depth": 0,
552-
"duration": 0.002999999999999999,
552+
"duration": 0.003,
553553
"lanes": Array [
554554
9,
555555
],
@@ -559,7 +559,7 @@ describe('Timeline profiler', () => {
559559
Object {
560560
"batchUID": 0,
561561
"depth": 1,
562-
"duration": 0.0010000000000000009,
562+
"duration": 0.001,
563563
"lanes": Array [
564564
9,
565565
],
@@ -656,7 +656,7 @@ describe('Timeline profiler', () => {
656656
Object {
657657
"batchUID": 0,
658658
"depth": 1,
659-
"duration": 0.0009999999999999992,
659+
"duration": 0.001,
660660
"lanes": Array [
661661
0,
662662
],
@@ -748,7 +748,7 @@ describe('Timeline profiler', () => {
748748
Object {
749749
"batchUID": 0,
750750
"depth": 1,
751-
"duration": 0.0009999999999999992,
751+
"duration": 0.001,
752752
"lanes": Array [
753753
0,
754754
],
@@ -865,7 +865,7 @@ describe('Timeline profiler', () => {
865865
Object {
866866
"batchUID": 0,
867867
"depth": 1,
868-
"duration": 0.0009999999999999992,
868+
"duration": 0.001,
869869
"lanes": Array [
870870
4,
871871
],
@@ -887,7 +887,7 @@ describe('Timeline profiler', () => {
887887
Object {
888888
"batchUID": 1,
889889
"depth": 0,
890-
"duration": 0.012000000000000004,
890+
"duration": 0.012,
891891
"lanes": Array [
892892
4,
893893
],
@@ -897,7 +897,7 @@ describe('Timeline profiler', () => {
897897
Object {
898898
"batchUID": 1,
899899
"depth": 0,
900-
"duration": 0.0030000000000000027,
900+
"duration": 0.003,
901901
"lanes": Array [
902902
4,
903903
],
@@ -907,7 +907,7 @@ describe('Timeline profiler', () => {
907907
Object {
908908
"batchUID": 1,
909909
"depth": 0,
910-
"duration": 0.008000000000000004,
910+
"duration": 0.008,
911911
"lanes": Array [
912912
4,
913913
],
@@ -917,7 +917,7 @@ describe('Timeline profiler', () => {
917917
Object {
918918
"batchUID": 1,
919919
"depth": 1,
920-
"duration": 0.0010000000000000009,
920+
"duration": 0.001,
921921
"lanes": Array [
922922
4,
923923
],
@@ -927,7 +927,7 @@ describe('Timeline profiler', () => {
927927
Object {
928928
"batchUID": 1,
929929
"depth": 0,
930-
"duration": 0.0029999999999999957,
930+
"duration": 0.003,
931931
"lanes": Array [
932932
4,
933933
],
@@ -946,21 +946,21 @@ describe('Timeline profiler', () => {
946946
},
947947
Object {
948948
"componentName": "App",
949-
"duration": 0.0020000000000000018,
949+
"duration": 0.002,
950950
"timestamp": 0.018,
951951
"type": "passive-effect-mount",
952952
"warning": null,
953953
},
954954
Object {
955955
"componentName": "App",
956-
"duration": 0.0010000000000000009,
956+
"duration": 0.001,
957957
"timestamp": 0.023,
958958
"type": "render",
959959
"warning": null,
960960
},
961961
Object {
962962
"componentName": "App",
963-
"duration": 0.0010000000000000009,
963+
"duration": 0.001,
964964
"timestamp": 0.036,
965965
"type": "passive-effect-mount",
966966
"warning": null,
@@ -1052,7 +1052,7 @@ describe('Timeline profiler', () => {
10521052
Object {
10531053
"batchUID": 0,
10541054
"depth": 1,
1055-
"duration": 0.0009999999999999992,
1055+
"duration": 0.001,
10561056
"lanes": Array [
10571057
4,
10581058
],
@@ -1072,7 +1072,7 @@ describe('Timeline profiler', () => {
10721072
Object {
10731073
"batchUID": 1,
10741074
"depth": 0,
1075-
"duration": 0.012000000000000004,
1075+
"duration": 0.012,
10761076
"lanes": Array [
10771077
4,
10781078
],
@@ -1082,7 +1082,7 @@ describe('Timeline profiler', () => {
10821082
Object {
10831083
"batchUID": 1,
10841084
"depth": 0,
1085-
"duration": 0.0030000000000000027,
1085+
"duration": 0.003,
10861086
"lanes": Array [
10871087
4,
10881088
],
@@ -1092,7 +1092,7 @@ describe('Timeline profiler', () => {
10921092
Object {
10931093
"batchUID": 1,
10941094
"depth": 0,
1095-
"duration": 0.008000000000000004,
1095+
"duration": 0.008,
10961096
"lanes": Array [
10971097
4,
10981098
],
@@ -1102,7 +1102,7 @@ describe('Timeline profiler', () => {
11021102
Object {
11031103
"batchUID": 1,
11041104
"depth": 1,
1105-
"duration": 0.0010000000000000009,
1105+
"duration": 0.001,
11061106
"lanes": Array [
11071107
4,
11081108
],
@@ -1112,7 +1112,7 @@ describe('Timeline profiler', () => {
11121112
Object {
11131113
"batchUID": 1,
11141114
"depth": 0,
1115-
"duration": 0.0029999999999999957,
1115+
"duration": 0.003,
11161116
"lanes": Array [
11171117
4,
11181118
],

‎packages/react-devtools-shared/src/__tests__/storeStressSync-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('StoreStress (Legacy Mode)', () => {
2828
act = utils.act;
2929
legacyRender = utils.legacyRender;
3030

31-
print = require('./storeSerializer').print;
31+
print = require('./__serializers__/storeSerializer').print;
3232
});
3333

3434
// This is a stress test for the tree mount/update/unmount traversal.

‎packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('StoreStressConcurrent', () => {
2828
// this helper with the real thing.
2929
actAsync = require('./utils').actAsync;
3030

31-
print = require('./storeSerializer').print;
31+
print = require('./__serializers__/storeSerializer').print;
3232
});
3333

3434
// TODO: Remove this in favor of @gate pragma

‎scripts/jest/config.build-devtools.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,22 @@ module.exports = Object.assign({}, baseConfig, {
6262
testRegex: 'packages/react-devtools-shared/.+/__tests__/[^]+.test.js$',
6363
snapshotSerializers: [
6464
require.resolve(
65-
'../../packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js'
65+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js'
6666
),
6767
require.resolve(
68-
'../../packages/react-devtools-shared/src/__tests__/hookSerializer.js'
68+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js'
6969
),
7070
require.resolve(
71-
'../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
71+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js'
7272
),
7373
require.resolve(
74-
'../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
74+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js'
7575
),
7676
require.resolve(
77-
'../../packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js'
77+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js'
78+
),
79+
require.resolve(
80+
'../../packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js'
7881
),
7982
],
8083
setupFiles: [

0 commit comments

Comments
 (0)