Здесь мне нужно написать контрольные примеры с использованием реакционных хуков для использования состояния в шутке и энзиме. У меня есть две кнопки, и в зависимости от выбора кнопки будет загружен component1, если selectedBtn = "btn1"
Как мне написать контрольные примеры, чтобы определить, какая кнопка выбрана и на основании чего мне нужно загрузить component1, если выбран btn1, и component2, если выбран btn2.
const [selectedBtn, setSelectedBtn] = useState("btn1");
const clickBtn = (btnType: string): void => {
setSelectedBtn(btnType);
};
<button className={classBtn1} onClick={(): void => {clickBtn("btn1");}}> Button1 </button>
<button className={classBtn2} onClick={(): void => {clickBtn("btn2");}}> Button2 </button>
{selectedBtn === "btn1" ? ( <div> <Component props={comp1}/> </div>) : (<div> <Component2 props={comp2}/> </div>)}
Я пытался использовать следующие тестовые наборы, но я не знаю, как написать тестовые наборы для ловушек useState. Как мне нужно изменить следующие тестовые наборы для достижения функциональности упомянутый выше.
it("Clicks the component", (): void => {
// @ts-ignore
const wrapper = mount(
<Router>
<button onClick={clickBtn("btn1")} />
</Router>
);
wrapper
.find("button")
.simulate("click");
expect(Component).toHaveBeenCalledWith("comp1");
});