Javascript 如何测试React组件的方法并将其包括在我的伊斯坦布尔报道中？

我想知道我如何能够测试我的react组件的方法，并将它们包括在我的伊斯坦布尔测试范围内

编辑：我在用酶。忘了提那件事了

例如，我有一个组件：

class SearchFormContainer extends Component {
  static handleToggle = () => {
    const filter = document.querySelector('.filter-container');
    const root = document.getElementById('root');
    if (filter.classList.contains('closed')) {
      filter.classList.remove('closed');
      filter.classList.add('opened');
      root.classList.add('paused');
    } else {
      root.classList.remove('paused');
      filter.classList.remove('opened');
      filter.classList.add('closed');
    }
  };

  updateQuantity = (e) => {
    const { store } = this.props;
    store.setQuantity(e.target.value);
  }

  updateStrength = (e) => {
    const { store } = this.props;
    store.setStrength(e.target.value);
  }

  updateCustomQuantity = (e) => {
    const { store } = this.props;
    let value = e.target.value || '';
    if (!value) {
      store.setPricingError('invalidquantity');
    } else {
      value = value.match(/\d+(\.)?(\d+)?/);

      if (!value) {
        value = '';
      } else {
        value = value[0];
      }

      if (parseFloat(value) <= 0) {
        store.setPricingError('invalidquantity');
      } else if (store.pricingError === 'invalidquantity') {
        store.setPricingError(null);
      }
    }

    store.setCustomQuantity(value);
  }

  render() {
    const {
      styleName,
      openFilterLabel,
      closeFilterLabel,
      updateFilterLabel,
      searchLabel,
      quantityLabel,
      strengthLabel,
      zipLabel,
      zipPlaceholder,
      searchFormAnchor,
      customQuantityPlaceholder,
      store,
      searchBar,
    } = this.props;
    const toggled = 'closed';
    const { useCustomQuantity } = store;

    let inputType = 'predefined';

    if (useCustomQuantity) {
      inputType = 'custom';
    } else {
      inputType = 'predefined';
    }

    const handleCustomInput = () => {
      store.toggleUseCustomQuantity();
    };

这里有一个我正在尝试运行的测试，注意我已经在descripe块中分配了store和searchBar

  it('calls upDateQuantity', () => {
    sinon.spy(App.prototype, 'updateQuantity');
    const updateQuantity = sinon.stub();
    const component = shallow(<App
      updateQuantity={updateQuantity}
      store={store}
      searchBar={searchBar}
      openFilterLabel="Filter"
      closeFilterLabel="Close"
      updateFilterLabel="UPDATE"
      searchLabel="Medication Name"
      quantityLabel="Quantity"
      strengthLabel="Strength"
      zipLabel="ZIP code"
      zipPlaceholder="11111"
      searchFormAnchor="SearchForm"
      name="search-field"
      placeholder="Search drug name..."
      customQuantityPlaceholder="Enter Custom Quantity"
    />);
    component.find('#quantitySelector').simulate('click');
    expect(App.updateQuantity.callCount).to.equal(1);
 });

我不确定这是否会测试实际的函数，似乎只是测试事件是否被触发？我得到了一个错误：

TypeError:试图将未定义的属性updateQuantity包装为函数

我不知道如何测试上面的某些方法，如Handletogle、updateQuantity、UpdateStrength等。我的反应测试技能还很年轻，因此非常感谢您的帮助。谢谢大家!

我建议使用在您的测试中呈现react组件，并按照以下步骤进行操作。然后，您可以直接使用以下工具测试组件方法：

const component = shallow(<MyComponent {...props} />)
component.instance().myMethod()

或者，如果需要在组件上触发事件，可以执行以下操作：

import {shallow} from 'enzyme'
import ButtonControl from '../ButtonControl'

describe('ButtonControl component', () => {
  it('handleClick', () => {

    let onClickHandler = jest.fn()
    let props = { handleClick: onClickHandler }

    let component = shallow(<ButtonControl {...props} />)

    component.find('button').first().props().onClick()
    expect(onClickHandler).toHaveBeenCalled()
  })
})

---

这个测试使用jest加上代码覆盖率。酶与茉莉花相兼容，应该很容易适应。

谢谢您的回复！我的方法不在实例中，可能是因为我使用了箭头函数？关于如何访问它们有什么想法吗？箭头函数在这里应该不是问题，对于静态函数，这是另一个故事。你用的是哪种酶？很有趣。我用的是2.8.2。如果我使用console.log component.instance.updateQuantity，我会得到未定义？是否可以添加测试代码，以便我们可以了解更多错误信息，例如，您使用的是shallow、mount还是render？当然，我刚刚编辑了我的问题，以包括我正在尝试的测试。正如我上面所说的，我不确定这是否真的会测试函数并将其包含在我的覆盖范围内，这是我的目标。再次感谢您的回复！