Migrate tests for AddToCart button to Vite #1899
Conversation
In replacing the old providers, this is one way of doing it now with RTL. Not sure if this is better or not, but it does seem more clear to me?
|
We detected some changes in |
packages/hydrogen/src/components/AddToCartButton/tests/AddToCart.vitest.tsx
Show resolved
Hide resolved
| { | ||
| wrapper: ({children}) => ( | ||
| <CartTestProviders | ||
| cartConfig={{linesAdd: mockLinesAdd, cart: {id: '456'}}} |
There was a problem hiding this comment.
In more complicated situations, it's clear what props we're passing to the Provider to overwrite things
| @@ -0,0 +1,95 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
A lot of this file is taking what is found in
import {mountWithProviders} from '../../../utilities/tests/shopifyMount.js';
import {mountWithCartProvider} from '../../CartProvider/tests/utilities.js';and combining them into a new file. The reason for the new file is that the version of shopify's testing library that we have isn't compatible with Vitest, and there are issues where it's in the import path of a Vitest file.
| } | ||
| ); | ||
|
|
||
| expect(screen.getByRole('button')).toHaveAttribute('class', 'bg-blue-600'); |
There was a problem hiding this comment.
Note that in these tests, we want to getByRole instead of using a testId
|
@cartogram @mrkldshv @lordofthecactus Would like your thoughts on this one! |
packages/hydrogen/src/components/AddToCartButton/tests/AddToCart.vitest.tsx
Show resolved
Hide resolved
Really, there's no need to add a level of abstraction when we can just do it directly.
|
Reduced a layer of abstraction - the goal is to make these tests easy to read and understand, so personally I think removing the |
| render( | ||
| <CartTestProviders | ||
| cartProviderValues={{linesAdd: mockLinesAdd, cart: {id: '456'}}} | ||
| > |
There was a problem hiding this comment.
easy to customize, and easy to tell what provider is being used. Just render directly instead of using wrapper
| <ProductOptionsProvider data={product}> | ||
| <AddToCartButton variantId={null}>Add to cart</AddToCartButton> | ||
| </ProductOptionsProvider>, | ||
| {wrapper: CartTestProviders} |
There was a problem hiding this comment.
When customization isn't needed, then we can use wrapper if you want
Description
In replacing the old providers, this is one way of doing it now with RTL. Not sure if this is better or not, but it does seem more clear to me?
Part of #670
Additional context
Before submitting the PR, please make sure you do the following:
fixes #123)yarn changeset addif this PR cause a version bump based on Keep a Changelog and adheres to Semantic Versioning