Блог

У меня есть функция, которая выглядит следующим образом, и я пытаюсь протестировать функцию rowDoubleClicked. Я издеваюсь над разрешенным значением axios и вижу, что функция getAccountData покрывается, что должно означать, что обновление dataArray.isLoading было бы ложным.

однако в моем тесте, когда я отлаживаю оболочку. Он всегда попадает в оператор if, который отображает загрузочный div вместо компонента grid, и я пытаюсь выяснить, как заставить его отображать сетку, чтобы я мог вызвать функцию rowDoubleClicked.

Я пытался обновить оболочку, но она остается прежней. Я также пытался выполнить awat waitForElement для компонента, но у него просто истекло время ожидания

 import React, { useState } from 'react';
import axios from 'axios';

const MyComponent = (props) => {
  let grid;
  const dataArray = {
    errorText: '',
    rowData: '',
    isLoading: true,
  };
  const [data, setData] = useState();
  if (undefined !== data) {
    dataArray.errorText = data.errorText;
    dataArray.isLoading = data.isLoading;
    dataArray.rowData = data.rowData;
  }

  const setShow = props.functions;
  const getAccountData = async () => {
    await axios
      .get(props.endpoint)
      .then((result) => {
        dataArray.rowData = resu<
      })
      .catch((error) => {
        dataArray.errorText = error;
      });
    dataArray.isLoading = false;
    setData(dataArray);
  };
  const handleClose = () => setShow(false);
  const rowDoubleClicked = () => {
    //some action
  };

  if (dataArray.errorText !== '') {
    grid = (
      <div>
        <p>Error</p>
      </div>
    );
  } else if (dataArray.isLoading) {
    getAccountData();
    grid = (
      <div className="loading">
        <p>Loading</p>
      </div>
    );
  } else if (dataArray.rowData !== '') {
    grid = <Grid handleRowDoubleClicked={rowDoubleClicked} />;
  }

  return (
    <div>
      <Modal visible={props.show} closable onCancel={handleClose}>
        <div>{grid}</div>
      </Modal>
    </div>
  );
};

export default MyComponent;
  

MyComponentView

 import React from 'react'
import MyComponent from ''

const MyComponentView = (props) => {
 
  const [select, setSelect] = React.useState('')
  const [show, setShow] = React.useState(false)
  const [selectedSearchBy, setSearchBy] = React.useState('')
  const [selectedValue, setSearchByValue] = React.useState('')

  const handleSearchIconClick = () => {
    setShow(true)
  }
 
  const handleOnChange = (e) => {
    setSearchBy(e.selectedOptionVal)
    setSearchByValue(e.value)
  }

 
  return (
    <div>
        <form
          action={`${endpoint`}
          method='post'
          onSubmit={handleSubmit}
        >
          <input type='hidden' id='searchBy' name='searchBy' value={selectedSearchBy} />
          <input type='hidden' id='searchValue' name='searchValue' value={selectedValue} />
          <Button data-testid='accessButton' id='accessButton' block color='primary'>
          Search
          </Button>
        </form>
        {show amp;amp; (
          <MyComponent
            show
            functions={setShow}
            onModalApplyClick={handleApply}
            endpoint={endpoint}
          />
        )}
      </div>
    </div>
  )
}

export default MyComponentView
  

вот мой текущий тест

 it('performs double click on grid', async () => {
  let wrapper;
  let grid;
  axios.get.mockResolvedValue(dataJSON);
  wrapper = mount(
    <MyComponent {...props} show>
      <Modal>
        <Grid {...gridProps} />
      </Modal>
    </MyComponent>
  );
  grid = wrapper.find(Grid);
  wrapper.update();
  await waitForElement(() => expect(grid).toBeTruthy());
  grid.invoke('handleRowDoubleClicked')();
  await act(() => Promise.resolve());
});
  

Похоже, что ваш axios.get.mockResolvedValue работает не так, как предполагалось. В таких ситуациях я, лично, просто использую axios-mock-adapter .

Также, похоже, waitForElement устарел. Как насчет простого setTimeout с помощью jest done() ?

 import MockAdapter from 'axios-mock-adapter';

it('...', (done) => {
    const mock = new MockAdapter(axios);
    mock.onPost().reply(200, dataJSON);

    //your test's logic

    setTimeout(() => {
        expect(grid).toBeTruthy();
    }, 1000);  //or any reasonable delay
});