feat: make prettier optional for inline snapshots

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 
+- `[jest-snapshots]`: Make prettier optional for inline snapshots - fall back to string replacement ([#7792](https://github.com/facebook/jest/pull/7792))
 - `[jest-resolve]`: Pass default resolver into custom resolvers ([#7714](https://github.com/facebook/jest/pull/7714))
 - `[jest-cli]`: `global{Setup,Teardown}` use default export with es modules ([#7750](https://github.com/facebook/jest/pull/7750))
 - `[jest-runtime]` Better error messages when the jest environment is used after teardown by async code ([#7756](https://github.com/facebook/jest/pull/7756))

packages/jest-snapshot/package.json

@@ -9,6 +9,7 @@
   "license": "MIT",
   "main": "build/index.js",
   "dependencies": {
+    "@babel/parser": "^7.2.3",
     "@babel/types": "^7.0.0",
     "chalk": "^2.0.1",
     "jest-diff": "^24.0.0",

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

@@ -53,10 +53,9 @@ afterEach(() => {
 
 test('saveInlineSnapshots() replaces empty function call with a template literal', () => {
   const filename = path.join(__dirname, 'my.test.js');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => `expect(1).toMatchInlineSnapshot();\n`,
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => `expect(1).toMatchInlineSnapshot();\n`);
 
   saveInlineSnapshots(
     [
@@ -75,14 +74,113 @@ 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},
+      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},
+        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 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},
+      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 => {
     const filename = path.join(__dirname, 'my.test.js');
-    // $FlowFixMe mock
-    fs.readFileSync = (jest.fn(
-      () => 'expect(1).toMatchInlineSnapshot(`2`);\n',
-    ): any);
+    jest
+      .spyOn(fs, 'readFileSync')
+      .mockImplementation(() => 'expect(1).toMatchInlineSnapshot(`2`);\n');
 
     prettier.resolveConfig.sync.mockReturnValue({parser});
 
@@ -108,10 +206,9 @@ test.each([['babylon'], ['flow'], ['typescript']])(
 
 test('saveInlineSnapshots() replaces existing template literal with property matchers', () => {
   const filename = path.join(__dirname, 'my.test.js');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => 'expect(1).toMatchInlineSnapshot({}, `2`);\n',
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => 'expect(1).toMatchInlineSnapshot({}, `2`);\n');
 
   saveInlineSnapshots(
     [
@@ -130,12 +227,37 @@ 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},
+          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');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => 'expect(1).toMatchInlineSnapshot();\n',
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => 'expect(1).toMatchInlineSnapshot();\n');
 
   const save = () =>
     saveInlineSnapshots(
@@ -154,10 +276,9 @@ test('saveInlineSnapshots() throws if frame does not match', () => {
 
 test('saveInlineSnapshots() throws if multiple calls to to the same location', () => {
   const filename = path.join(__dirname, 'my.test.js');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => 'expect(1).toMatchInlineSnapshot();\n',
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => 'expect(1).toMatchInlineSnapshot();\n');
 
   const frame = {column: 11, file: filename, line: 1};
   const save = () =>
@@ -174,10 +295,9 @@ test('saveInlineSnapshots() throws if multiple calls to to the same location', (
 
 test('saveInlineSnapshots() uses escaped backticks', () => {
   const filename = path.join(__dirname, 'my.test.js');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => 'expect("`").toMatchInlineSnapshot();\n',
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => 'expect("`").toMatchInlineSnapshot();\n');
 
   const frame = {column: 13, file: filename, line: 1};
   saveInlineSnapshots([{frame, snapshot: '`'}], prettier, babelTraverse);
@@ -190,10 +310,9 @@ test('saveInlineSnapshots() uses escaped backticks', () => {
 
 test('saveInlineSnapshots() works with non-literals in expect call', () => {
   const filename = path.join(__dirname, 'my.test.js');
-  // $FlowFixMe mock
-  fs.readFileSync = (jest.fn(
-    () => `expect({a: 'a'}).toMatchInlineSnapshot();\n`,
-  ): any);
+  jest
+    .spyOn(fs, 'readFileSync')
+    .mockImplementation(() => `expect({a: 'a'}).toMatchInlineSnapshot();\n`);
   prettier.resolveConfig.sync.mockReturnValue({
     bracketSpacing: false,
     singleQuote: true,