Функциональный компонент тестирования React (простая корзина) - PullRequest
Новая
       9

Функциональный компонент тестирования React (простая корзина)

0 голосов
/ 01 марта 2020

Я новичок в тестировании и пытаюсь протестировать простой компонент корзины с помощью Jest и Enzyme. Ниже вы можете увидеть упрощенную версию кода. В основном, Корзина получает товары с помощью useContext. В корзине будет отображаться сводка стоимости товаров, а в таблице компонентов будут показаны все товары и функции (добавьте или уменьшите количество товаров или удалите их). Таблица также использует useContext. 

export const Cart = () => {
const { cartItems, clearCart } = useContext(CollectionContext);

const subtotal = cartItems.length
  ? cartItems.reduce((accumulator, currentItem) => {
      return accumulator + currentItem.price * currentItem.amount;
    }, 0)
  : 0;
const total = parseFloat((subtotal * (tax / 100 + 1)).toFixed(2));

return (
  <div>
    <Table />
    <div>
      <button onClick={() => clearCart()}>Clear cart</button>
      <p>Subtotal: {cartItems.length && subtotal}€</p>
      <p>Tax: {tax}%</p>
      <p>Total: {total}€</p>
    </div>
  </div>
  );
};

До сих пор я мог написать только следующее: 

it("should list bought items", () => {
  const wrapper = mount(
    <CollectionProvider>
      <Router>
        <Cart />
      </Router>
    </CollectionProvider>
  );
});

Но у меня есть только пустая корзина. Мне нужно издеваться const { cart, clearCart } = useContext(CollectionContext); Как только я это получу, я смогу проверить все детали и функциональность. Не могли бы вы пролить свет, и дайте мне знать, как его высмеивать Если мой подход неверен, пожалуйста, дайте мне знать. Скажите, если вам нужен полный код или другие детали.

...