Тестирование формы с помощью jest + энзима с помощью onBlur, вызывающего asyn c action

Question

В настоящее время на моем экране есть форма, составленная из нескольких входов. CEP является одним из входных данных и имеет поле setState, связанное с событием onChange, а также имеет действие, которое вызывается при возникновении onBlur.

Внутри действия я выбираю значение, обновленное в состоянии, и вызываю asyn c метод API и обновление состояния с помощью информации, возвращаемой действием.

Я хотел бы знать, верна ли идея теста, я имею в виду, согласно возможностям jest + энзим. Итак, моя идея состоит в том, чтобы протестировать эту форму так, как ее использует пользователь.

1 - Изменить значение в поле.

2 - Сделать onBlur на входе.

3 - Получить значение, которое «пользователь» поместил в поле внутри действия.

4 - Вызвать метод asyn c с этим значением.

5 - Проверить, есть некоторые значения на других входах, которые заполнены ответом API. Например, для ввода адреса.

Некоторые вопросы:

Это правильный способ проверки этого процесса? Я имею в виду, должен ли я проверить все это в одном и том же контексте или отдельно?

Я пробовал много разных способов сделать этот прогон, но не добился успеха, что заставляет меня задаться вопросом то, что я хочу, возможно или даже правильно.

Вот код формы (остальная часть кода была удалена для этого примера)

  async autoCompleteCEP() {
    const { cep } = this.state;

    const cepData = await buscaCEP(cep);

    this.setState({ cidadeIBGE: -1 });

    if (cepData !== undefined) {
      const {
        bairro, cidade, endereco, estado, id_cidade_ibge,
      } = cepData;

      this.setState({
        neighborhood: bairro,
        city: cidade,
        address: endereco,
        state: estado,
        cidadeIBGE: id_cidade_ibge,
        number: '',
      });
    }
  }

  inputChange(e) {
    const { name, value } = e.target;

    this.setState({ [name]: value });
  }

  render() {
    const {
      history,
      location,
      docs,
      changeDocs,
    } = this.props;

    const {
      isSubmitting, desiredName, email, name, dateOfBirth, phone,
      cellphone, cpf, hasntCard, cep, address,
      number, neighborhood, city, state, complement,
      obs,
    } = this.state;

    const { typeOfPerson } = location;

    return (
      <>
        <Header
          title="Some header"
          subtitle={name}
        />
        <Spin indicator={antIcon} spinning={isSubmitting}>
          <Row
            className={Styles.editMainContainer}
            gutter={0}
          >
            <Col
              className={GlobalStyles.defaultToggleWidthItem}
              span={24}
            >
              <form
                onSubmit={this.submit}
              >
                <div
                  className={GlobalStyles.defaultToggleHeightItem}
                  style={{ display: 'flex', flexDirection: 'column' }}
                >
                  { typeOfPerson === 'C' && (
                    <div style={{ paddingTop: 25, paddingLeft: 25, paddingRight: 25 }}>
                      <Typography.Title
                        level={3}
                        style={{ fontWeight: 'bold' }}
                      >
                        Endereço
                      </Typography.Title>
                      <Row gutter={25}>
                        <TextInput
                          required
                          validateKey="editPerson"
                          name="cep"
                          id="cep"
                          haveMask
                          mask="11111-111"
                          layout="vertical"
                          labelinput="CEP"
                          xs={24}
                          sm={24}
                          md={8}
                          lg={8}
                          validateRegex={validCEP}
                          placeholder="_____-___"
                          handleOnBlur={this.autoCompleteCEP}
                          value={cep}
                          onChange={this.inputChange}
                        />
                        <TextInput
                          required
                          validateKey="editPerson"
                          name="address"
                          id="address"
                          layout="vertical"
                          labelinput="Endereço"
                          xs={24}
                          sm={24}
                          md={12}
                          lg={12}
                          value={address}
                          onChange={this.inputChange}
                        />
                      </Row>
                    </div>
                  )}
                </div>
              </form>
            </Col>
          </Row>
        </Spin>
      </>
    );
  }
}

А вот мой тест:

import React from 'react';
import { mount, shallow } from 'enzyme';
import { Provider } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import promise from 'redux-promise';
import multi from 'redux-multi';
import thunk from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
import { act } from 'react-dom/test-utils';

import WrapperStatistic from 'antd/lib/statistic/Statistic';
import EditPerson from './index';

// reducers
import rootReducer from '../../store/reducers/index';

// setup
const persistConfig = {
  key: 'test',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = applyMiddleware(multi, thunk, promise)(createStore)(persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

const persistor = persistStore(store);

describe('Testing EditProfile Component', () => {
  let propsMock;
  beforeEach(() => {
    propsMock = { goBack: () => {} };
  });


  it('Testing fetching infos of address by CEP', () => {
    const component = mount(
      <Provider store={store}>
        <EditPerson
          history={propsMock}
          location={{ typeOfPerson: 'C' }}
        />
      </Provider>,
    );

    const cepField = component.find('input#cep');
    cepField.simulate('change', { target: { value: '89226-640' } });

    expect(component.find('input#cep').props().value).toEqual('89226-640'); 
    /* Here i'm having success, which means that i'm setting the value as I mentioned on the step 1 */

  });
});