Question

我想知道我是如何测试我的反应组件的方法并将它们包含在我的伊斯坦布尔测试报道中的？

编辑：我正在使用酶。忘记提及。

例如，我有这个组件：

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

这是我正在尝试运行的测试（请注意，我已在describe块中分配了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: Attempted to wrap undefined property updateQuantity as function.

我不确定如何测试上面的某些方法，例如handleToggle，updateQuantity，UpdateStrength等。我的反应测试技能很年轻，所以非常感谢任何帮助。谢谢！

Answer 1

我建议使用enzyme在测试中呈现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加代码覆盖率。酶与茉莉相容，应易于适应。

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

1 个答案: