Testing conditional rendering in child component

Hi, I am trying to test a particular interaction in my component.

I have two components, let's call them

Parent

Parent

Parent

Parent and

Toast

Toast

Toast

Toast.

Toast

Toast

Toast

Toast is a child of the Parent component.

Below is a code snippet from the Toast component:

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

The

Parent

Parent

Parent

Parent component has a button that fires an API call. If there is an error in sending the API call, the signal that controls the visibility of the

Toast

Toast

Toast

Toast component is set to True

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

The problem Im facing is that the code inside the <Show> does not seem to re-render and Im not sure why. I also console.log the value of toastVisibility and I can confirm that its initially set to false and after clicking the button, its set to true

Testing conditional rendering in child component

Similar Threads

Similar Threads

Similar Threads