-
Notifications
You must be signed in to change notification settings - Fork 139
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
setup integration tests #18
Comments
I've been recently trying to write tests using react testing library and it seems impossible to get the bottom sheet to "be visible" to jsdom. |
We have just come across this issue too. I came to the repo hoping there would be unit tests that could be referenced but unfortunately there's no tests at all in the codebase :(. |
There is a workaround @rjohnsonbade-dcs , I found that you can mock 'react-spring' and bottom sheet relies on that for calculations. Something similar to this should get you 90% of the way... jest.mock('react-spring', () => {
const actualReactSpring = jest.requireActual('react-spring');
return {
...actualReactSpring,
useSpring: (): ReturnType<typeof useSpring> =>
actualReactSpring.useSpring(() => mockSpring),
};
});
let mockSpring: {
y: number;
ready: number;
maxHeight: number;
minSnap: number;
maxSnap: number;
};
const maxHeight = window.innerHeight;
describe('BottomSheet', () => {
beforeEach(() => {
mockSpring = {
y: maxHeight / 2,
ready: 1,
maxHeight,
minSnap: maxHeight / 2,
maxSnap: maxHeight,
};
}); I set as a let mockSpring (naming beginning with "mock" is important for jest's mock) as I want to be able to set the height and y positions per test. It should be self explanatory but ensure your y value is between the min and max snaps, and ready is 1. This ensures the opacity is set to 1 and then react-testing-library can tell you that it is in the document and visible. If you want to test the interactions and swiping then you cannot do that as far as I am aware as jsdom will not do animations or layout stuff. So you may need to use something more suitable such as cypress for that but in my tests I want to be able to simply test the content renders in the Bottom Sheet. |
I'm dying to rewrite more internals, but all the manual testing is too time consuming so it's time to figure out what the best way to test highly interactive, drag gesture-y and animated packages like this one.
Anything using jsdom is automatically a no go as it doesn't even try to deal with
getBoundingClientRect
, scrolling or animations. And cypress, puppeteer, all these e2e solutions... I have yet to find true love but maybe playwright is the one I've been looking for all along? Open for any suggestions but if nobody interjects then I think I'll try playwright 😄The text was updated successfully, but these errors were encountered: