Jest: список массивов функциональных компонентов не отображается после добавления элемента - PullRequest
Новая
       6

Jest: список массивов функциональных компонентов не отображается после добавления элемента

0 голосов
/ 05 февраля 2020

Я пытаюсь составить список людей, щелкнув функцию onClick, чтобы добавить пустой объект, чтобы карта могла зацикливаться и показывать div. Я вижу, что вызов функции prop onclick работает, но карта не зацикливается на этом.

будет полезна небольшая помощь. 

// functional component

    const listing = ({list=[]}) => (
    <>
        {
        <div id='addPerson'  onClick={() => list.push({})}>Add person</div>}

        {list.map((element, index) => (
        <div key={index} className='listItems'>
            <p>list name</p>            
        </div>
        ))}
    </>
    );

    export default listing;

// test case

it('renders list-items', () => {
 const wrapper = shallow(<listing />);
 wrapper.find('#addPerson').prop('onClick')();
 console.log(wrapper.find('.listItems').length); // showing zero, expected 1
});

1 Ответ

1 голос
/ 05 февраля 2020

Обновление списка не вызовет повторного рендеринга в вашем компоненте. Я не уверен, откуда приходит List, но я предполагаю, что он исходит из локального состояния в родительском или, возможно, в избыточном хранилище. Внутри вашего компонента вам нужно будет вызвать функцию в родительском элементе, чтобы обновить там массив списков.

Ниже приведена версия вашего компонента, предполагающая наличие списка в вашем местном штате. Вам придется настроить код для обновления состояния в родительском или избыточном хранилище, но приведенного ниже должно быть достаточно, чтобы дать вам представление о том, что делать. Кроме того, не помещайте sh элемент в массив, поскольку он мутирует объект и не будет связываться с повторным рендерингом. 

const Listing = ({list = [], addToList}) => {
  return <>
    {
      <div id='addPerson' onClick={() => addToList({})}>Add person</div>}

    {list.map((element, index) => (
      <div key={index} className='listItems'>
        <p>list name</p>
      </div>
    ))}
  </>
};
...