SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (4:0)

[peritus]

Trying to use this library with mocha (porting from chai-jest-snapshot because I don't really use chai anywhere else and don't want to depend on two assertion libraries):

the unit test:

import React from 'react';
import { describe, it } from 'mocha';
import toJson from 'enzyme-to-json';
import { shallow } from 'enzyme';
import matchSnapshot from 'snap-shot';

import { AboutAppScreen } from '../../src/components/Settings/AboutAppScreen';

describe('snapshot tests', function () {
  it('AboutAppScreen', function () {
    matchSnapshot(toJson(shallow(<AboutAppScreen />)));
  });
});

... when trying to run this, I get the following output:

 snapshot tests
    1) AboutAppScreen

  0 passing (324ms)
  1 failing

  1) snapshot tests AboutAppScreen:
     SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (4:0)
      at Parser.pp$4.raise (node_modules/acorn/dist/acorn.js:2221:15)
      at Parser.pp$1.parseStatement (node_modules/acorn/dist/acorn.js:717:16)
      at Parser.pp$1.parseTopLevel (node_modules/acorn/dist/acorn.js:638:25)
      at Parser.parse (node_modules/acorn/dist/acorn.js:516:17)
      at parse (node_modules/acorn/dist/acorn.js:3098:39)
      at module.exports (node_modules/falafel/index.js:22:15)
      at getSpecFunction (node_modules/snap-shot/src/index.js:48:3)
      at snapshot (node_modules/snap-shot/src/index.js:177:5)
      at Context.<anonymous> (test/snapshot/index.test.js:26:5)

Here's how my test currently looks like (using chai-jest-snapshot) where I pass the name of the test / snapshot explicitly:

-function assertMatchSnapshot (test, component) {
-  const tree = toJson(shallow(component));
-  const snapshotFileName = path.join(__dirname, `${test.title}.spec.js.snap`);
-  expect(tree).to.matchSnapshot(snapshotFileName, test.fullTitle());
-}
-
 describe('snapshot tests', function () {
   it('AboutAppScreen', function () {
-    assertMatchSnapshot(this.test, <AboutAppScreen />);
+    matchSnapshot(toJson(shallow(<AboutAppScreen />)));
   });

Can I pass the name of the snapshot explicitly and opt out of the smart AST parsing ?

The above example is using v1.11.0 of snap-shot.

[bahmutov]

Thanks for taking time to provide all details in the issue.

The "import" and "export" error is not due to parsing, I believe but due to bundling which gets confused when there is "snap-shot" module which uses "require". But anyway, of course it would be simple to let the user pass the name of the snapshot into "snap-shot" function and be done.

But I personally think this would defeat the goal - zero config and zero duplication between the test framework and "snap-shot". Let me check Jest better, I have tried a single test and need to have a complete Jest project to test "snap-shot" to make sure it works 100%.

[bahmutov]

The test project for this https://github.com/bahmutov/snap-shot-modules-test

[bahmutov]

Hmm, seems with babel transform in between, the callsite is not accurate. Need to make sure https://github.com/bahmutov/snap-shot-modules-test is passing.

[peritus]

@bahmutov Thanks. Updated to v1.11.2 and the error is a different one now:

  2) snapshot tests AboutAppScreen:
     SyntaxError: Unexpected token (15:33)
      at Parser.pp$4.raise (node_modules/acorn/dist/acorn.js:2221:15)
      at Parser.pp.unexpected (node_modules/acorn/dist/acorn.js:603:10)
      at Parser.pp$3.parseExprAtom (node_modules/acorn/dist/acorn.js:1822:12)
      at Parser.pp$3.parseExprSubscripts (node_modules/acorn/dist/acorn.js:1715:21)
      at Parser.pp$3.parseMaybeUnary (node_modules/acorn/dist/acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (node_modules/acorn/dist/acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (node_modules/acorn/dist/acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (node_modules/acorn/dist/acorn.js:1597:21)
      at Parser.pp$3.parseExprList (node_modules/acorn/dist/acorn.js:2165:22)
      at Parser.pp$3.parseSubscripts (node_modules/acorn/dist/acorn.js:1741:35)
      at Parser.pp$3.parseExprSubscripts (node_modules/acorn/dist/acorn.js:1718:17)
      at Parser.pp$3.parseMaybeUnary (node_modules/acorn/dist/acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (node_modules/acorn/dist/acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (node_modules/acorn/dist/acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (node_modules/acorn/dist/acorn.js:1597:21)

.. and that's the place where my source contains JSX ("<AboutAppScreen />") .. shall I file a new issue ?