How to test a MobX store function asynchronously with Jest

Question

I've tried a lot of ways to test if the function addItem in my MobX store adds an item to the orders that have been fetched, but I think the orders being fetched asynchronously is causing trouble because orders stays undefined.

However, I wàs able to test the asynchronous call in my API of the orders being fetched with jest.

Sidenote: this is my first time using Jest so sorry in advance if I'm doing some stuff that's not the best idea to do

orderStore.js

import {observable, action} from 'mobx';

import {orderAPI} from '../lib/api';

class Store {
  constructor(){
    this.fetchOrders();
  }

  @observable orders = []
  @observable state = "pending"

  @action
  fetchOrders = () => {
    this.orders = [];
    this.state = "pending";
    return orderAPI.fetchOrders()
      .then(orders => {
        this.orders = orders;
        this.state = "done";
        console.log(orders);
      })
      .catch(err => {
        console.error(err);
        this.state = "error";
      });
  }

  @action
  addItem = (orderId, productId, price) => {
    const order = this.findSpecificOrder(orderId);
    if (order.items.filter(item => item['product-id'] === productId).length === 0) {
      const itemToAdd = Object.assign({
        "product-id": productId,
        "quantity": 1,
        "unit-price": price,
        "total": price
      });
      order.items.push(itemToAdd);
    }else{
      this.createDuplicateItemError(productId);
    }
  }

  @action
  createDuplicateItemError = productId => {
    // this.addItemErrors[productId] = 'This item is already included in the order.';
  }

  @action
  removeItem = (productId, customerId, orderId, posInArray) => {
    const order = this.findSpecificOrder(orderId);
    order.items.splice(posInArray, 1);
  }

  @action
  changeItemQuantity = (productId, customerId, orderId, posInArray, operator) => {
    const order = this.findSpecificOrder(orderId);
    const item = order.items[posInArray];
    if (operator === 'decrement') {
      if (parseInt(item.quantity, 10) === 1) {
        this.removeItem(productId, customerId, orderId, posInArray)
      }else{
        item.quantity --;
      }
    }else{
      item.quantity ++;
    }
    this.changeTotal(item);
  }

  @action
  changeTotal = item => {
    const newTotal = this.calculateTotal(item['unit-price'], item.quantity);
    item.total = newTotal;
  }

  @action
  calculateTotal = (price, amount) => {
    return (price * amount).toFixed(2);
  }

  @action
  findSpecificOrder = orderId => {
    return this.orders.filter(nr => nr.id === orderId)['0'];
  }
}

const orderStore = new Store();

export default orderStore;

app.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/App';
import {inject, observer} from 'mobx-react';
import orderStore from '../src/stores';
import {Provider} from 'mobx-react';
import {orderAPI} from '../src/lib/api';
import {itemAPI} from '../src/lib/api';

it('can add an item to an order', () => {
  return orderStore.orderStore.fetchOrders()
  .then(() => {
    const orderId = 1;
    const productId = "B102";
    const price = "4.99";
    const order = orderStore.orderStore.findSpecificOrder(orderId);
    orderStore.orderStore.addItem(orderId, productId, price);
    const updatedOrder = orderStore.orderStore.findSpecificOrder(orderId);
    expect(order.length).toBe(updatedOrder.length + 1);
  })
})

it('loads the orders', () => {
  return orderAPI.fetchOrders()
  .then(orders => {
    expect(orders).toBeDefined();
    expect(orders.length > 0).toBeTruthy();
  });
})

it('loads the items', () => {
  return itemAPI.fetchItems()
  .then(items => {
    expect(items.length > 0).toBeTruthy();
  });
})

orderAPI.js

import fetch from 'isomorphic-fetch';

export default {
  fetchOrders: () => {
    return fetch(`http://localhost:3000/data/orders.json`)
      .then(r => r.json())
      .then(data => data.orders)
      .catch(err => console.error(err))
  }
}

Test results:

 FAIL  __tests__/App.test.js
  ● can add an item to an order

    TypeError: Cannot read property 'items' of undefined

      at Store.<anonymous> (src/stores/orderStore.js:32:18)
      at executeAction (node_modules/mobx/lib/mobx.js:867:19)
      at Store.res (node_modules/mobx/lib/mobx.js:858:16)
      at _stores2.default.orderStore.fetchOrders.then (__tests__/App.test.js:28:61)
      at process._tickCallback (internal/process/next_tick.js:103:7)

  ✕ can add an item to an order (10ms)
  ✓ loads the orders (4ms)
  ✓ loads the items (5ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        0.334s, estimated 1s
Ran all test suites.