feat: make prettier optional for inline snapshots

.vscode/settings.json

@@ -9,5 +9,6 @@
   "flow.useNPMPackagedFlow": true,
   "javascript.validate.enable": false,
   "jest.pathToJest": "yarn jest --",
-  "prettier.eslintIntegration": true
+  "prettier.eslintIntegration": true,
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
 }

CHANGELOG.md

@@ -8,6 +8,7 @@
 - `[@jest/reporter]` Display todo and skip test descriptions when verbose is true ([#8038](https://github.com/facebook/jest/pull/8038))
 - `[jest-runner]` Support default exports for test environments ([#8163](https://github.com/facebook/jest/pull/8163))
 - `[pretty-format]` Support React.Suspense ([#8180](https://github.com/facebook/jest/pull/8180))
+- `[jest-snapshots]`: Make prettier optional for inline snapshots - fall back to string replacement ([#7792](https://github.com/facebook/jest/pull/7792))
 
 ### Fixes
 

packages/jest-snapshot/package.json

@@ -10,6 +10,10 @@
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/generator": "^7.3.4",
+    "@babel/parser": "^7.2.3",
+    "@babel/traverse": "^7.3.4",
     "@babel/types": "^7.0.0",
     "@jest/types": "^24.5.0",
     "chalk": "^2.0.1",

packages/jest-snapshot/src/__tests__/inline_snapshots.test.ts

@@ -7,11 +7,13 @@
 
 jest.mock('fs');
 jest.mock('prettier');
+jest.mock('@babel/core');
 
 import fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
 import babelTraverse from '@babel/traverse';
+import * as babelCore from '@babel/core';
 import {Frame} from 'jest-message-util';
 
 import {saveInlineSnapshots} from '../inline_snapshots';
@@ -30,6 +32,10 @@ beforeEach(() => {
   }));
   fs.readdirSync = jest.fn(() => []);
 
+  jest
+    .spyOn(babelCore, 'loadPartialConfig')
+    .mockImplementation(() => ({options: {plugins: []}}));
+
   (prettier.resolveConfig.sync as jest.Mock).mockReset();
 });
 afterEach(() => {
@@ -63,6 +69,179 @@ test('saveInlineSnapshots() replaces empty function call with a template literal
   );
 });
 
+test('saveInlineSnapshots() without prettier leaves formatting outside of snapshots alone', () => {
+  const filename = path.join(__dirname, 'my.test.js');
+  jest.spyOn(fs, 'readFileSync').mockImplementation(
+    () =>
+      `
+const a = [1,            2];
+expect(a).toMatchInlineSnapshot(\`an out-of-date and also multi-line
+snapshot\`);
+expect(a).toMatchInlineSnapshot();
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+`.trim() + '\n',
+  );
+
+  saveInlineSnapshots(
+    [2, 4, 5].map(line => ({
+      frame: {column: 11, file: filename, line} as Frame,
+      snapshot: `[1, 2]`,
+    })),
+    null,
+    babelTraverse,
+  );
+
+  expect(fs.writeFileSync).toHaveBeenCalledWith(
+    filename,
+    `const a = [1,            2];
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+`,
+  );
+});
+
+test('saveInlineSnapshots() can handle typescript without prettier', () => {
+  const filename = path.join(__dirname, 'my.test.ts');
+  jest.spyOn(fs, 'readFileSync').mockImplementation(
+    () =>
+      `
+interface Foo {
+  foo: string
+}
+const a: [Foo, Foo] = [{ foo: 'one' },            { foo: 'two' }];
+expect(a).toMatchInlineSnapshot();
+`.trim() + '\n',
+  );
+
+  saveInlineSnapshots(
+    [
+      {
+        frame: {column: 11, file: filename, line: 5} as Frame,
+        snapshot: `[{ foo: 'one' }, { foo: 'two' }]`,
+      },
+    ],
+    null,
+    babelTraverse,
+  );
+
+  expect(fs.writeFileSync).toHaveBeenCalledWith(
+    filename,
+    `
+interface Foo {
+  foo: string
+}
+const a: [Foo, Foo] = [{ foo: 'one' },            { foo: 'two' }];
+expect(a).toMatchInlineSnapshot(\`[{ foo: 'one' }, { foo: 'two' }]\`);
+`.trim() + '\n',
+  );
+});
+
+test('saveInlineSnapshots() can handle tsx without prettier', () => {
+  const filename = path.join(__dirname, 'my.test.tsx');
+  jest.spyOn(fs, 'readFileSync').mockImplementation(
+    () =>
+      `
+it('foos', async () => {
+  const Foo = (props: { foo: string }) => <div>{props.foo}</div>;
+  const a = await Foo({ foo: "hello" });
+  expect(a).toMatchInlineSnapshot();
+})
+`.trim() + '\n',
+  );
+
+  saveInlineSnapshots(
+    [
+      {
+        frame: {column: 13, file: filename, line: 4} as Frame,
+        snapshot: `<div>hello</div>`,
+      },
+    ],
+    null,
+    babelTraverse,
+  );
+
+  expect(fs.writeFileSync).toHaveBeenCalledWith(
+    filename,
+    `
+it('foos', async () => {
+  const Foo = (props: { foo: string }) => <div>{props.foo}</div>;
+  const a = await Foo({ foo: "hello" });
+  expect(a).toMatchInlineSnapshot(\`<div>hello</div>\`);
+})
+`.trim() + '\n',
+  );
+});
+
+test('saveInlineSnapshots() can handle flow and jsx without prettier', () => {
+  jest.spyOn(babelCore, 'loadPartialConfig').mockImplementation(() => ({
+    options: {
+      plugins: ['flow', 'jsx'],
+    },
+  }));
+  const filename = path.join(__dirname, 'my.test.js');
+  jest.spyOn(fs, 'readFileSync').mockImplementation(
+    () =>
+      `
+const Foo = (props: { foo: string }) => <div>{props.foo}</div>;
+const a = Foo({ foo: "hello" });
+expect(a).toMatchInlineSnapshot();
+`.trim() + '\n',
+  );
+
+  saveInlineSnapshots(
+    [
+      {
+        frame: {column: 11, file: filename, line: 3} as Frame,
+        snapshot: `<div>hello</div>`,
+      },
+    ],
+    null,
+    babelTraverse,
+  );
+
+  expect(fs.writeFileSync).toHaveBeenCalledWith(
+    filename,
+    `
+const Foo = (props: { foo: string }) => <div>{props.foo}</div>;
+const a = Foo({ foo: "hello" });
+expect(a).toMatchInlineSnapshot(\`<div>hello</div>\`);
+`.trim() + '\n',
+  );
+});
+
+test('saveInlineSnapshots() can use prettier to fix formatting for whole file', () => {
+  const filename = path.join(__dirname, 'my.test.js');
+  jest.spyOn(fs, 'readFileSync').mockImplementation(
+    () =>
+      `
+const a = [1,            2];
+expect(a).toMatchInlineSnapshot(\`an out-of-date and also multi-line
+snapshot\`);
+expect(a).toMatchInlineSnapshot();
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+`.trim() + '\n',
+  );
+
+  saveInlineSnapshots(
+    [2, 4, 5].map(line => ({
+      frame: {column: 11, file: filename, line} as Frame,
+      snapshot: `[1, 2]`,
+    })),
+    prettier,
+    babelTraverse,
+  );
+
+  expect(fs.writeFileSync).toHaveBeenCalledWith(
+    filename,
+    `const a = [1, 2];
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+expect(a).toMatchInlineSnapshot(\`[1, 2]\`);
+`,
+  );
+});
+
 test.each([['babylon'], ['flow'], ['typescript']])(
   'saveInlineSnapshots() replaces existing template literal - %s parser',
   parser => {
@@ -118,6 +297,32 @@ test('saveInlineSnapshots() replaces existing template literal with property mat
   );
 });
 
+test.each([prettier, null])(
+  'saveInlineSnapshots() creates template literal with property matchers',
+  prettierModule => {
+    const filename = path.join(__dirname, 'my.test.js');
+    jest
+      .spyOn(fs, 'readFileSync')
+      .mockImplementation(() => 'expect(1).toMatchInlineSnapshot({});\n');
+
+    saveInlineSnapshots(
+      [
+        {
+          frame: {column: 11, file: filename, line: 1} as Frame,
+          snapshot: `1`,
+        },
+      ],
+      prettierModule,
+      babelTraverse,
+    );
+
+    expect(fs.writeFileSync).toHaveBeenCalledWith(
+      filename,
+      'expect(1).toMatchInlineSnapshot({}, `1`);\n',
+    );
+  },
+);
+
 test('saveInlineSnapshots() throws if frame does not match', () => {
   const filename = path.join(__dirname, 'my.test.js');
   (fs.readFileSync as jest.Mock).mockImplementation(