Question

我已经尝试了很多方法来测试我的MobX存储中的函数addItem是否为已经获取的订单添加了一个项目，但我认为异步获取的订单会导致问题，因为{{ 1}}保持未定义。

但是，我能够在我的API中测试使用jest获取的订单的异步调用。

旁注：这是我第一次使用Jest，如果我正在做一些不是最好的想法的事情，请提前抱歉

orderStore.js

orders

app.test.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;

orderAPI.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();
  });
})

测试结果：

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))
  }
}

如何与Jest异步测试MobX存储功能

0 个答案: