Question

我的任务是更新现有组件，以对服务器端实现进行验证调用。因此，我将react组件中的一些调用转换为async函数。

问题陈述在我的测试中无法访问React组件中的ref和/或this，而且我很难确定原因。

带有手动绑定的ES6 / React类，用于格式化PhoneNumber

class PhoneView extends React.Component {
    constructor(props) {
        super(props);
        // note the manual bind here instead of using arrow function
        this.formatPhoneNumber = this.formatPhoneNumber.bind(this);

render（）方法的参考代码片段

<div className="position-relative">
  <input type="tel" name="phone" defaultValue={this.getPhoneValue()}
    data-prop="phone"
    data-countrycode={this.state.activeCountryCode}
    className="phone js-phone form-control no-border-radius-left"
    ref={
    (jsPhone) => {
    this.jsPhone = jsPhone;
   }
  }
    onBlur={this.formatPhoneNumber}
    onInput={this.adjustInputPadding}
    onFocus={this.onFocus}
    onKeyUp={this.removeError}
    data-at-id="phone"
    data-tracking-label="phone"
    autoComplete="off"
    style={{ paddingLeft: this.state.inputPaddingLeft }}
/>

异步代码（正在测试）-未定义this，因此在测试过程中无法访问ref设置的属性。

async formatPhoneNumber() {

    try {
      let valid;
       const phoneNumberValue = this.jsPhone.value.trim();  // this is undefined here during test
       ...

测试代码段

describe('phone view', () => {
    let wrapper;
    let instance;
    beforeEach(() => {
        wrapper = Enzyme.mount(
            <PhoneView/>);
            instance = wrapper.instance();
    });

// .....

describe('#formatPhoneNumber', () => {
        it.only('should format the phone number', async() => {
            const phoneInput = wrapper.find('.js-phone');
            phoneInput.simulate('change', { target: { value: '+14152223333' } });
            const foo = await instance.formatPhoneNumber();
            // make some expectations
        });
    });

问题： 是否有一种“最好/更好”的方法来测试使用酶的React组件的async功能，尤其是在使用refs的情况下？

反应/酶单位测试异步/等待方法

0 个答案: