Mobx: 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": "[email protected]",
    +         "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 [e-mail]:

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": "[email protected]",
+ "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.

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
https://github.com/mobxjs/mobx/issues/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 [e-mail]:

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
https://github.com/mobxjs/mobx/issues/1613#issuecomment-401304266, 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
https://github.com/facebook/jest/pull/6398,
https://github.com/facebook/jest/pull/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 [e-mail]:

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
https://github.com/mobxjs/mobx/issues/1613#issuecomment-401337312, 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: https://github.com/facebook/jest/issues/7443

[mweststrate]

Fix has been merged: https://github.com/facebook/jest/pull/7448, will probably be released anywhere soon. Closing this one in the mean time.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.