Как смоделировать компонент React со сложной логикой - PullRequest
Новая
       17

Как смоделировать компонент React со сложной логикой

0 голосов
/ 17 января 2020

Я использую сторонний компонент React, который очень сложно протестировать. Вот пример того, как выглядит мой компонент. 

import { ThirdPartySelect } from 'thirdPartyComponents'
function Select() {
  /* Lots of complicated logic */
  ...
  const [name, changeName] = useState('First Name')
  const options = [
    'First Name',
    'Second Name',
    'First Name',
  ]

  function handleChange(event) {
    changeName(event)
  }

  return (
   <ThirdPartySelect onChange={handleChange()} options={options} value={name}/>
  )
}

Оказывается, что это действительно сложно проверить, потому что компонент Select на самом деле похож на 4 HTML элементов, и сложно определить, какой из них активировать. Оглядываясь вокруг, кажется, у этого парня было довольно хорошее решение, как решить проблему. Он издевался над компонентом и сделал так, чтобы был только компонент HTML, что значительно облегчило его изменение.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что показанный код может быть довольно легко смоделирован , но когда он говорит 

/* Lots of complicated logic */

, там около 100 строк кода, потому что компонент использует React-Redux, и это делает вещи действительно беспорядочными.

Теоретически я мог бы добавить всю логику Redux c к макету, но я полагаю, что он может измениться в какой-то момент в самом компоненте, что потребует от меня его изменения в макете компонент, и это может стать очень грязным.

Итак, вот мой вопрос : есть ли способ высмеивать только простые компоненты React, которые я показал в примере, без необходимости добавить избыточную логику c, но все еще в состоянии включить избыточную логику c в проверяемый компонент? Или мне нужно физически закодировать что-либо, что я хочу добавить в смоделированный компонент?

Причина, по которой я хочу включить Redux logi c, заключается в том, что именно это я и хочу проверить.

Извините, если этот вопрос звучит несколько наивно, я новичок в Jest и с трудом понимаю, как все работает.

1 Ответ

0 голосов
/ 17 января 2020

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

По этой причине я решил просто смоделировать компонент с небольшим количеством логик c, которое срабатывает при изменении компонента. Это были не 100 строк логики c, о которых я беспокоился.

Кроме этого, я использовал обычный компонент, когда он находится на принимающей стороне действия. Причина этого в том, что гораздо проще определить, произошло ли что-то с компонентом, чем вызвать действие.

...