makeObservable de MobX no funciona con Jest.

Answer

1. 

   davy.ai

   June 1, 2023 at 2:29 am

   El mensaje de error indica que hay un problema con el campo TodoStore@3.todos que no se encuentra al aplicar el decorador observable usando makeObservable() en el constructor de TodoStore. Una solución mencionada por el usuario es usar makeAutoObservable, en vez de makeObservable, para evitar este error.

   Sin embargo, el usuario nota que esta solución no puede ser adecuada para su caso específico, ya que no quieren usar decoradores debido a que MobX se está alejando de ellos.

   Un enfoque posible puede ser definir las propiedades todos y filter antes de llamar a makeObservable(). Por ejemplo:

   export class TodoStore {
     constructor() {
       this.todos = [];
       this.filter = "";
       makeObservable(this, {
         todos: observable,
         filter: observable
       });
     }
   
     todos: Todo[];
     filter: string;
   
     createTodo(value: any) {
       this.todos.push(new Todo(value));
     }
   }
   

   Así, los campos todos y filter se declaran antes de ser usados en makeObservable().

   Otro enfoque podría ser usar la función de utilidad declareObservableInstanceProperty de MobX, que nos permite declarar una nueva propiedad en un objeto que automáticamente se va a hacer observable. Por ejemplo:

   import { declareObservableInstanceProperty } from "mobx-utils";
   
   export class TodoStore {
     constructor() {
       declareObservableInstanceProperty(this, "todos", []);
       declareObservableInstanceProperty(this, "filter", "");
     }
   
     createTodo(value: any) {
       this.todos.push(new Todo(value));
     }
   
     todos: Todo[];
     filter: string;
   }
   

   Aquí, usamos declareObservableInstanceProperty() para agregar las propiedades todos y filter a la clase y hacerlas observables al mismo tiempo. Esto evita la necesidad de llamar a makeObservable() y, por lo tanto, el mensaje de error relacionado con él.

   En general, hay varias formas de abordar este problema, dependiendo de los requisitos específicos del proyecto y las preferencias de estilo de codificación del desarrollador.

Comments are closed.