Как обновить реквизиты React Component во время юнит-тестов? - PullRequest
Новая
       20

Как обновить реквизиты React Component во время юнит-тестов?

3 голосов
/ 27 марта 2019

Я новичок в React Unit Testing и застрял с этим вопросом.

У меня есть дочерний компонент с обратным вызовом onClick к его родителю. Затем родитель обновит дочерний элемент props на основе обратного вызова. У ребенка есть собственный стиль, основанный на значении реквизита.

Примерно так: 

// Parent
const ParentComponent = () => {
    let isActive = false;
    const clickCallback = () => {
        isActive = true;
    }
    return <ChildComponent handleClick={clickCallback} active={isActive} />
}

// Child
const ChildComponent = (props) => {
    return <button onClick={props.handleClick} style={props.active} />
}

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

Я попробовал этот подход, но он не сработал: 

let mockIsActive = false;
const mockCallback = () => {mockIsActive = true;}
ReactDOM.render(
    <ChildComponent handleClick={mockCallback} active={mockIsActive} />, 
    container
);

const myChild = container.querySelector("button");
expect(myChild.getComputedStyle).toEqual("my check here");
myChild.dispatchEvent(new MouseEvent("click", {bubbles: true}));
expect(myChild.getComputedStyle).toEqual("my new check here");

Я предполагаю, что я обновляю переменную, но она на самом деле не связана с компонентами реквизита?

Дополнительная информация:

  • Поведение работает нормально, когда я запускаю проект (изменения пользовательского стиля)
  • В моем конкретном сценарии мне нужно управлять дочерним реквизитом от родителя
  • В настоящее время у меня есть react-test-renderer и react-dom/test-utils, но я могу включить внешние библиотеки при необходимости
  • Самый близкий ответ, который я нашел в Интернете, был здесь , но я не смог применить решения в моем проекте

Спасибо!

1 Ответ

3 голосов
/ 28 марта 2019

Я бы посоветовал вам использовать Enzyme и Jest для тестирования ваших компонентов, предоставляемый ими API богат и обширен.

Предположим, вы используете фермент, вы сделаете это так: 

const wrapper = shallow(<Parent />);

wrapper.find(Child).props().handleClick();
expect(wrapper.instance().isActive)).to.equal(true); // Assuming Parent is a class based component

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

...