kdtheegreat-react-testing-framework-mocking

[glacial hamlet]

hello, not sure I understand, can you elaborate a lot more on what you're blocked on? like you just shared a code snippet for PaymentElement creation but not much more

[tall nexus]

Hey, so I am trying to test my checkout page using react testing library. I created a mock component that looks like

const MockCheckout = () => {

  let mockStripe: any;
  let mockStripePromise: any;

  const fakeClientSecret = 'cs_123_secret_abc';
  const fakeOptions = { clientSecret: fakeClientSecret };

  mockStripe = mocks.mockStripe();
  mockStripePromise = Promise.resolve(mockStripe);

  return (
    <BrowserRouter>
      <Elements stripe={mockStripePromise} options={fakeOptions}>
        <Checkout />
      </Elements>
    </BrowserRouter>
  )
}

and when I go to render it in my test

it("should render checkout page", () => {
    render(<MockCheckout />)
  })

nothing is found besides 1 div

[glacial hamlet]

depends on what you mean by "mock", like literally "mock" the entire Payment Element object? that isn't possible

you need a real PaymentIntent client_secret (a test mode one works fine)

[tall nexus]

how would I go about testing my checkout page if nothing is rendered?

export const Checkout = () => {
  const navigate = useNavigate()
  const { currentCart } = useContext(UserDataContext)
  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null>>();
  const [clientSecret, setClientSecret] = useState("");
  const [totalPrice, setTotalPrice] = useState(0)

  useEffect(() => {
    async function fetchStripePromise() {
      try {
        const res = await fetch(`http://localhost:5000/stripe/config`)
  
        const { publishableKey } = await res.json()
  
        setStripePromise(loadStripe(publishableKey))
      } catch (error) {
        console.error(error)
      }
    }

    fetchStripePromise()
  }, [])

  // fetces client secret
  useEffect(() => {
    async function fetchClientSecret() {
      try {
        const res = await fetch(`http://localhost:5000/stripe/create-payment-intent`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ items: currentCart?.products }),
        })

        const data = await res.json()

        setClientSecret(data.clientSecret)
      } catch (error) {
        console.error(error)
      }
    }

    if (stripePromise && currentCart?.products?.length != 0) {
      fetchClientSecret()
    }
  }, [stripePromise, currentCart])

  useEffect(() => {
    
    function getTotalPrice() {

      let total = 0
      
      const cartItems = currentCart?.products

      cartItems?.forEach((item) => {
        total += item.price * parseInt(item.quantity)
      })

      setTotalPrice(total)
    }

    getTotalPrice()

  }, [currentCart])

  if (currentCart?.products?.length === 0) {
    setTimeout(() => {
      navigate("/cart")
    }, 3000)
  }

  return (
    <>
      {stripePromise && clientSecret && (
        <Elements stripe={stripePromise} options={{ clientSecret }}>
          <PaymentForm totalPrice={totalPrice} />
        </Elements>
      )}
    </>
  )
}

this is my checkout page if that helps

[tall nexus]

hi synth, lmk if my questions are unclear and ill try to explain more

[dusty coyote]

Hey there, likely as @glacial hamlet says you wouldn't mock/test much of this, certainly not our UI but just your own logic around it

I don't know how much specific advice we can offer around this, but what kind of test are you trying to perform, exactly?

[tall nexus]

Honestly, im pretty new to testing and was trying to test the functionality of the page, essentially testing the conditional rendering and my other functions in there

[dusty coyote]

So you probably want to mock those bits in some way thats suitable for your testing framework then, yes. Unfortunately I don't know the details of how you'd do that for react testing framework here.

[tall nexus]

ok thanks anyways