[jest-each] Add primitive pretty printing (jestjs#7694)

Author: mattphillips

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 
+- `[jest-each]` [**BREAKING**] Add primitive pretty printing for interpolated titles ([#7694](https://github.com/facebook/jest/pull/7694))
 - `[jest-runtime]` Add `jest.isolateModules` for scoped module initialization ([#6701](https://github.com/facebook/jest/pull/6701))
 - `[jest-diff]` [**BREAKING**] Support diffing numbers and booleans instead of returning null for different ones ([#7605](https://github.com/facebook/jest/pull/7605))
 - `[jest-diff]` [**BREAKING**] Replace `diff` with `diff-sequences` package ([#6961](https://github.com/facebook/jest/pull/6961))

e2e/__tests__/__snapshots__/each.test.js.snap

@@ -17,7 +17,7 @@ PASS __tests__/pretty.test.js
     ✓ -Infinity == -Infinity
     ✓ NaN == NaN
   template
-    ✓ "hello" == "hello"
+    ✓ hello == hello
     ✓ 1 == 1
     ✓ null == null
     ✓ undefined == undefined

e2e/each/__tests__/failure.test.js

@@ -53,7 +53,7 @@ describe.each`
   ${'a'} | ${'b'}
   ${'c'} | ${'d'}
 `(
-  'template table describe fails on all rows expected $left == $right',
+  'template table describe fails on all rows expected "$left" == "$right"',
   ({left, right}) => {
     it('fails ', () => {
       expect(left).toBe(right);

packages/jest-each/package.json

@@ -18,6 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "chalk": "^2.0.1",
+    "jest-get-type": "^22.1.0",
     "jest-util": "^23.4.0",
     "pretty-format": "^23.6.0"
   },

packages/jest-each/src/__tests__/template.test.js

@@ -220,7 +220,7 @@ describe('jest-each', () => {
         const globalMock = get(globalTestMocks, keyPath);
         expect(globalMock).toHaveBeenCalledTimes(1);
         expect(globalMock).toHaveBeenCalledWith(
-          'interpolates object keyPath to value: "baz"',
+          'interpolates object keyPath to value: baz',
           expectFunction,
           undefined,
         );
@@ -282,6 +282,32 @@ describe('jest-each', () => {
           10000,
         );
       });
+
+      test('formats primitive values using .toString()', () => {
+        const globalTestMocks = getGlobalTestMocks();
+        const number = 1;
+        const string = 'hello';
+        const boolean = true;
+        const symbol = Symbol('world');
+        const nullValue = null;
+        const undefinedValue = undefined;
+        const eachObject = each.withGlobal(globalTestMocks)`
+          number | string | boolean | symbol | nullValue | undefinedValue
+          ${number} | ${string} | ${boolean} | ${symbol} | ${nullValue} | ${undefinedValue}
+        `;
+
+        const testFunction = get(eachObject, keyPath);
+        testFunction(
+          'number: $number | string: $string | boolean: $boolean | symbol: $symbol | null: $nullValue | undefined: $undefinedValue',
+          noop,
+        );
+        const globalMock = get(globalTestMocks, keyPath);
+        expect(globalMock).toHaveBeenCalledWith(
+          'number: 1 | string: hello | boolean: true | symbol: Symbol(world) | null: null | undefined: undefined',
+          expect.any(Function),
+          undefined,
+        );
+      });
     });
   });
 

packages/jest-each/src/bind.js

@@ -10,6 +10,7 @@
 import util from 'util';
 import chalk from 'chalk';
 import pretty from 'pretty-format';
+import getType from 'jest-get-type';
 import {ErrorWithStack} from 'jest-util';
 
 type Table = Array<Array<any>>;
@@ -23,6 +24,13 @@ const RECEIVED_COLOR = chalk.red;
 const SUPPORTED_PLACEHOLDERS = /%[sdifjoOp%]/g;
 const PRETTY_PLACEHOLDER = '%p';
 const INDEX_PLACEHOLDER = '%#';
+const PRIMITIVES = new Set([
+  'string',
+  'number',
+  'boolean',
+  'null',
+  'undefined',
+]);
 
 export default (cb: Function, supportsDone: boolean = true) => (...args: any) =>
   function eachBind(title: string, test: Function, timeout: number): void {
@@ -195,6 +203,11 @@ const getMatchingKeyPaths = title => (matches, key) =>
 const replaceKeyPathWithValue = data => (title, match) => {
   const keyPath = match.replace('$', '').split('.');
   const value = getPath(data, keyPath);
+  const valueType = getType(value);
+
+  if (PRIMITIVES.has(valueType)) {
+    return title.replace(match, value);
+  }
   return title.replace(match, pretty(value, {maxDepth: 1, min: true}));
 };