React.js - 使用Enzyme模擬點擊

Question

我有這個React.js應用程序，這是一個簡單的購物車應用程序。 https://codesandbox.io/s/znvk4p70xl

問題是我試圖使用Jest和Enzyme對應用程序的狀態進行單元測試，但它似乎不起作用。 這是我的Todo.test.js單元測試：

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

test('Test it', async () => {
  // Render a checkbox with label in the document
  const cart = [
    { name: 'Green', cost: 4 },
    { name: 'Red', cost: 8 },
    { name: 'Blue', cost: 14 }
  ];

  const wrapper = mount(<Todo cart={cart} />);
  const firstInput = wrapper.find('.name');
  firstInput.simulate('change', { target: { value: 'Pink' } });

  const firstCost = wrapper.find('.cost');
  firstCost.simulate('change', { target: { value: 200 } });

  const submitButton = wrapper.find('.addtocart');
  submitButton.simulate('click');

  wrapper.update();

  expect(wrapper.state('price')).toBe(26);

  console.log(wrapper.state());
  console.log(wrapper.props().cart);

});

當我進行測試時，當應該添加Pink項目時，購物車仍然會說同樣的事情。

當我模擬按鈕點擊addToCart方法時，怎么會這樣？

 PASS  src/__tests__/todo.test.js
  ● Console
    console.log src/__tests__/todo.test.js:32      { price: 26 }    
console.log src/__tests__/todo.test.js:33      [ { name: 'Green', cost: 4 },        { name: 'Red', cost: 8 },        { name: 'Blue', cost: 14 } ]

Answer 1

Enzyme的simulate是在你的Todo組件上尋找一個onChange事件，並沒有找到它。 你沒有將onChange指定為prop，所以它沒有觸發它是有意義的。 如果這是您想要測試的方式，請將onChange道具連接到您的組件。 來自文檔：

即使名稱暗示這模擬了一個實際的事件，.simulate（）實際上會根據你給它的事件來定位組件的prop。 例如，.simulate（'click'）實際上會獲得onClick prop並調用它。

Answer 2

您正在嘗試使用類addtocart模擬元素上的單擊。 但是，您沒有類addtocart的元素。 您的添加按鈕的元素ID為submit 。

改變這個：

const submitButton = wrapper.find('.addtocart');

對此：

const submitButton = wrapper.find('#submit');

Answer 3

看完你的Todo代碼后：

<input id="itemname" name="name" ref={this.nameRef} className="form-control" type="text" placeholder="Add item to List" />

和

<input name="cost" id="itemcost" ref={this.costRef} className="form-control" size="5" type="text" placeholder="Cost" />

我不認為wrapper.find('.cost')會起作用。 我建議你做wrapper.find('#cost')