Apollo-client: Apollo angular unexpected token for optimism.js using Jest testing framework

[rafael-leal-mccormack]

Intended outcome:

Tests using jest should pass.

Actual outcome:
Recieving unexpected token from optimism.js in version "apollo-cache-inmemory" 1.3.0.

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/rafaell/Desktop/Work/admin-ui/node_modules/apollo-cache-inmemory/lib/optimism.js:2
    export { wrap };
    ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at node_modules/apollo-cache-inmemory/lib/bundle.umd.js:92:16
      at Object.<anonymous>.haveWarned (node_modules/apollo-cache-inmemory/lib/bundle.umd.js:2:68)
      at Object.<anonymous> (node_modules/apollo-cache-inmemory/lib/bundle.umd.js:5:2)

How to reproduce the issue:

import { ApolloTestingModule } from 'apollo-angular/testing';

describe('Select Component', () => {
  let component: SelectComponent;
  let fixture: ComponentFixture<SelectComponent>;
  let store: Store<any>;
  let appService: AppService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SelectComponent],
      imports: [ApolloTestingModule],
      providers: [
        {
          provide: AppService,
          useValue: {
            getMenu: jest.fn(),
            getAllMenus: jest.fn(),
            updateMenu: jest.fn(),
          },
        },
        FormBuilder,
        mockStoreProvider({
          menu: {
            menuItems: [],
            previousMenus: [],
          },
        }),
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  }));
...

• Followed this guide to set up apollo and test https://www.apollographql.com/docs/angular/guides/testing.html

• If version got switched to 1.2.6 or lower, the tests would pass but functionality wouldnt work. I would receive the following error in the console.
  ERROR Error: Network error: Encountered a sub-selection on the query, but the store doesn't have an object reference. This should never happen during normal use unless you have custom code that is directly manipulating the store; please file an issue.

Versions

    "apollo-angular": "^1.1.2",
    "apollo-cache-inmemory": "1.3.0",
    "apollo-client": "2.4.5",
    "apollo-link": "1.2.2",
    "apollo-link-error": "1.1.0",
    "apollo-angular-link-http": "1.4.0",    
    "jest-preset-angular": "^5.2.3",

[Bmahecha123]

Experiencing same issue.

[pachuka]

Jest tests work fine up to 1.2.10 yet as with @rleal1995 the functionality of Queries fail. On 1.3.x I am seeing the same Jest failure, but the Queries work as expected.

[miamollie]

This was the fix for me: https://github.com/apollographql/apollo-client/issues/4083

Upgrade to [email protected]

Hope it helps :)

[rafael-leal-mccormack]

I'm actually still getting the error

/Users/rafaell/Desktop/Work/admin-ui/node_modules/apollo-cache-inmemory/lib/optimism.js:2
    export { wrap };
    ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at node_modules/apollo-cache-inmemory/lib/bundle.umd.js:139:18
      at node_modules/apollo-cache-inmemory/lib/bundle.umd.js:2:68
      at Object.<anonymous> (node_modules/apollo-cache-inmemory/lib/bundle.umd.js:5:2)

[rafael-leal-mccormack]

Works now after apollo-cache-inmemory 1.4.0 and apollo-client 2.4.10.

@pachuka @miamollie 👍