How can i test a mobx class with annotation (decorator), and proxies with jest

[nihil-pro]

Well... It's a big question. I will appreciate for any ideas.

I export a class from module 1:

export class TypeModel {
  public id: string
  public parameters: any[]
}

I export a mobx observable class from module 2:

export class InstanceModel {
  public typeName: string

  constructor() {
    makeAutoObservable(this)
  }
}

export a decorator from module 3

export function WithType({
  source = 'typeName',
  destination = 'type',
  makeItObservable = false
}: WithTypeOptions) {
    return function<T extends Constructor>(Class: T): T {
      return class extends Class {
        constructor(...args: any[]) {
          super(...args);


          /** define new property */
          Reflect.defineProperty(this, destination, { 
            enumerable: true, 
            configurable: true, 
            writable: true, 
            value: null 
          })

          /** Make it observable by mobx */
          if (makeItObservable) {
            extendObservable(this, { [destination]: null })
          }

          const setProperty = (value: TypeModel | null) => {
            Reflect.set(this, destination, value)
          }

          const setType = async (name: string) => {

            /** use cache to reduce number of network requests
             * this is normal, because types rarely changed
             * */

            if (!cache.hasOwnProperty(name)) {
              const type = await TypesController.getTypeByName(name)
              if (!type) {
                console.error(`In WithType > setType: Type ${name} wasn't found`)
              }
              cache[name] = type
            }

            /** Get type from cache and set it */
            setProperty(plainToInstance(TypeModel, cache[name])) 
          }


          /** We use Proxy to fire when source will be changed  */
          return new Proxy(this, {
            set: (target: Record<string | symbol, any>, key: string | symbol, value: any) => {
              // set original value
              target[key] = value
              
              // only react if source was changed
              if (key !== source) return true

              // apply async callback
              setType(value).catch(e => console.log('In @WithType ', e))
              
              return true
            }
          })
        }
      };
    };
}

I also export a class with decorator from module 4:

@WithType({ makeItObservable: true })
export class FinalModel extends InstanceModel {}

Then i get any json from api and transform it into FinalModel with class transformer

api.get(json => {
  const model = plainToInstance(FinalModel, json)
})

So, the model will be a mobx class, with a new property provided by decorator and it would be observable. Everything works as expected in dev mode and runtime. I really like this solution. The problem is with jest. I tried many different ways to test it, but every time got errors

Test:

/** The TypesController which is used by decorator is a module 
* provided by webpack module-federation.
* i mock it as a virtual module
*/
jest.mock('shell/typesController',
  () => ({
    __esModule: true,
    TypesController: {
      /** here i mock the method of controller
      * according to jest documentation, mockReturnValueOnce will be called first
      */
      getTypeByName: jest.fn()
        .mockReturnValue(null)
        .mockReturnValueOnce(mockedType())
    },
  }), { virtual: true }
)


describe('@WithType',  () => {
  it('', async () => {

    @WithType({ makeItObservable: true })
    class TestModel extends InstanceModel {} // such as FinalModel
    interface TestModel extends WithType {}

    /** this should call the mock method first time, 
    * and the type should be typeof TypeModel, but it would be null
    */
    const model: TestModel = plainToInstance(TestModel, mockInstance());
    expect(model.type).toBeInstanceOf(TypeModel) 

    /** this should call the mocked method by default, and value of type would be null */
    const model1 = plainToInstance(TestModel, mockInstance());
    expect(model1).toHaveProperty('type', null);

  })
}

But this doesn't work... First problem: [MobX] 'makeAutoObservable' can only be used for classes that don't have a superclass But TestModel don't have a super class. makeAutoObservable is called on the InstanceModel, and works as expected in runtime.

The other errors are caused with mocked virtual module or its mocked method. The result of mocked method every time is random. It can be null or a TypeModel in the same case if i run test few times.

Can anybody explain what happens here? Why all works fine expect tests?