Jest / Enzyme Test firing Child prop как функция в функциональном компоненте реакции - PullRequest
Новая
       28

Jest / Enzyme Test firing Child prop как функция в функциональном компоненте реакции

1 голос
/ 04 августа 2020

Я видел множество примеров тестирования имитирующей или дочерней опоры как функции в компонентах класса реакции, я пытаюсь протестировать что-то подобное для функциональных компонентов. Похоже, дочерний onClick не запускается.

my-component.jsx 

const myComponent = () => {
const [val, setVal] = useState(0);
const clickedVal = () => {
    setVal(prev => prev + 1);
  };
return (
 <Paper variant="outlined">
   <IconButton onClick={() => clickedVal()}>
    <MaterialUIIcon/>
   </IconButton>
<Child val={val}/>
</Paper>
)
}

Я пробовал ниже,

my-component.test.jsx 

it("test", () => {
wrapper = shallow(<MyComponent/>);
const child = wrapper.find(Child);
const iconButton = wrapper.find(IconButton)
console.log(`beforeClick ${child.prop("val")}`);
iconButton.simulate("click")
console.log(`afterClick ${child.prop("val")}`);

Я вообще не вижу изменения значения, я тоже пробовал следующее iconButton.prop("onClick)(); iconButton.props().onClick(); Кажется, ничего не работает, я вижу значение beforeClick afterClick как 0. Есть ли другой способ вызвать дочернюю опору функция в функциональных компонентах?

1 Ответ

0 голосов
/ 04 августа 2020

Я понял, где что-то пошло не так, после моделирования события вместо вызова prop val для дочернего элемента я снова нашел компонент Child, а затем получил prop val, как показано ниже 

it("test", () => {
wrapper = shallow(<MyComponent/>);
const child = wrapper.find(Child);
const iconButton = wrapper.find(IconButton)
console.log(`beforeClick ${child.prop("val")}`); // val is 0
iconButton.simulate("click")
console.log(`afterClick ${wrapper.find(Child).prop("val")}`);// val is 1

Спасибо @soumyasunny, как только я увидел, что clickedVal выполняется, я изменил способ доступа к реквизитам, и это сработало!

...