Testing store with jest snapshotting (mobx 5)

[PDarkTemplar]

Right now if i want to test my store with snapshot there is a lot of internal information like this:

...
    +     Symbol(mobx did run lazy initializers): true,
    +     Symbol(mobx administration): ObservableObjectAdministration$$1 {
    +       "defaultEnhancer": [Function],
    +       "keysAtom": Atom$$1 {
    +         "diffValue": 0,
    +         "isBeingObserved": false,
    +         "isPendingUnobservation": false,
    +         "lastAccessedBy": 0,
    +         "lowestObserverState": 2,
    +         "name": "TreePage@149.keys",
    +         "observers": Set {},
    +       },
    +       "name": "TreePage@149",
    +       "target": [Circular],
    +       "values": Map {
    +         "selectedFolder" => SelectedFolder {
    +           "id": 1,
    +           "name": "test1",
    +           "parentFolderId": undefined,
    +           "parentOrgUnitId": undefined,
    +           "type": undefined,
    +         },
    +         "breadCrumbs" => Array [],
    +         "items" => undefined,
    +         "loading" => true,
    +         "showSearchList" => false,
    +         "openFolderType" => "folder",
...

Which i don't need. So i created small transformation for jest which automaticly transform observables to JS. But then i lost all information about class names, and now they are all objects.

 "treePage": Object {
    "breadCrumbs": Array [],
    "canCreateFolder": false,
    "inputSearch": Object {
      "items": null,
      "loading": false,
      "requestsId": Array [],
      "showItems": null,
      "term": "",
    },

So my question is, is there is some tools to deal with this?
If someone interested in my transformation i could create repo for it.

[mweststrate]

Make sure you are using Jest 23.2 or higher Op do 28 jun. 2018 16:10 schreef PDarkTemplar <notifications@github.com>:

…

Right now if i want to test my store with snapshot there is a lot of internal information like this: ... + Symbol(mobx did run lazy initializers): true, + Symbol(mobx administration): ObservableObjectAdministration$$1 { + "defaultEnhancer": [Function], + "keysAtom": Atom$$1 { + "diffValue": 0, + "isBeingObserved": false, + "isPendingUnobservation": false, + "lastAccessedBy": 0, + "lowestObserverState": 2, + "name": ***@***.***", + "observers": Set {}, + }, + "name": ***@***.***", + "target": [Circular], + "values": Map { + "selectedFolder" => SelectedFolder { + "id": 1, + "name": "test1", + "parentFolderId": undefined, + "parentOrgUnitId": undefined, + "type": undefined, + }, + "breadCrumbs" => Array [], + "items" => undefined, + "loading" => true, + "showSearchList" => false, + "openFolderType" => "folder", ... Which i don't need. So i created small transformation for jest which automaticly transform observables to JS. But then i lost all information about class names, and now they are all objects. So my question is, is there is some tools to deal with this? If someone interested in my transformation i could create repo for it. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1613>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhEGyT8envon5i5WIwiDxgbr9Bcx4ks5uBOPwgaJpZM4U7dma> .

[PDarkTemplar]

I update jest to 23.2 and it doesn't help, unfortinatly.

[PDarkTemplar]

I created small repro, and find cause, if i create class throught constructor i would see all the internals of mobx. But if i create class in class field, it would be empty. I need middle result :) just plain value with className if it is class. Or it is jest bug, and i should go there?

[mweststrate]

You might need to read values first before testing the snapshot (e.g. test = new Test(); test.test;), otherwise the properties won't live on the instance yet (due to decorator limitations) Op vr 29 jun. 2018 om 11:39 schreef PDarkTemplar <notifications@github.com>:

…

I created small repro <https://github.com/PDarkTemplar/MobxTestRepro>, and find cause if i create class throught constructor i would see all the internals of mobx. But if i create class in class field, it would be empty. I need middle result :) just plain value with className if it is class. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1613 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhABZYivBAZA22Ydzy1DDFw8ngnkRks5uBfXagaJpZM4U7dma> .

[PDarkTemplar]

Ok, so if in first test i read value, i would get exactly the same result as on second test. And i want to cut out Symbol(mobx administration) and Symbol(mobx did run lazy initializers). And i think i could do this only with custom transformation.

[mweststrate]

Will investigate later, as this is exactly what has been fixed here jestjs/jest#6398, jestjs/jest#6391, but maybe additional work is needed to make snapshots follow the same rules now that I think of it :) Op vr 29 jun. 2018 om 14:19 schreef PDarkTemplar <notifications@github.com>:

…

Ok, so if in first test i read value, i would get exactly the same result as on second test. And i wont to cut out Symbol(mobx administration) and Symbol(mobx did run lazy initializers). And i think i could do this only with custom transformation. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1613 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhAHgeBUkJbhTPG44GwDkIXVIiTOBks5uBhtBgaJpZM4U7dma> .

[manu-st]

Any update on this? Is there a workaround?

[thejuan]

You can add a custom snapshot serializer for observables, but you loose the object type (it will print Object { rather than MyType { )

import {isObservable, toJS} from "mobx";

expect.addSnapshotSerializer({
  test(value) {
    if (!value) {
      return false;
    }
    if (isObservable(value)) {
      return true;
    }

    return false;
  },
  print(value, serialize, indent) {
    return serialize(toJS(value));
  }
});

[thejuan]

A little better

expect.addSnapshotSerializer({
  test(value) {
    return isObservable(value);
  },
  serialize(value, config, indentation, depth, refs, printer) {
    if (isObservableArray(value)) {
      return printer(value.slice(), config, indentation, depth, refs);
    }
    const keys = Object.getOwnPropertyNames(value);
    keys.sort();
    const inner = keys
      .map(key => {
        return (
          indentation +
          config.indent +
          printer(key, config, indentation, depth, refs) +
          ": " +
          printer(value[key], config, indentation, depth, refs)
        );
      })
      .join(",\n");
    if (inner) {
      return value.constructor.name + " {\n" + inner + ",\n" + indentation + "}";
    }
    return value.constructor.name + " {}";
  }
});

[austinalameda]

@mweststrate any update on this? we are upgrading packages, jest 23.6.0, mobx 5.6.0, and our snapshots grow out of control having all this extra information

[mweststrate]

Sorry, no, didn't get around opening an issue or PR on jest (the problem is that it should ignore non-enumerable (symbolic) members. It was fixed a while ago for toEqual, but not yet for snapshots. If anybody beats me to it that would be great ;)

[austinalameda]

if you have additional input: jestjs/jest#7443

[mweststrate]

Fix has been merged: jestjs/jest#7448, will probably be released anywhere soon. Closing this one in the mean time.