-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
[DataGrid] All JSDOM tests fail with v6.2.1 #8697
Comments
Adding Mocks for ResizeObsever that was added in this version did not help. I understand that it's used for resize detection but it's non availability should not prevent the virtual scroller from rendering |
OK, finally it did help to add mocks for beforeEach(mockResizeObserver);
function mockResizeObserver() {
window.ResizeObserver = class ResizeObserver {
constructor(callback) {
this.callback = callback;
}
observe(target) {
setTimeout(() => this.callback([{ target }]), 0);
}
unobserve() {}
disconnect() {}
};
} You'll notice the ugly I hope it helps other JSDOM users out there. Cheers, |
Still I do face same issue suddently test cases wer failing -> previously I sorted out using disableVirtualization,autoHeight using datagridpro - ^6.1.0, rows and columns were not rendering in test cases - using jest with react testing. Tried using window.ResizeObserver (above solution), still the issue persists. |
I'm also seeing this but mocking In my tests I have a div with set dimensions around the grid, |
This is how snapshot renders it includes col and row count but it was not rendering ->
|
Hi everyone, mui-x/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx Lines 52 to 68 in aba4549
If this doesn't help, please provide a minimal reproduction example (could be a repo on GitHub) and we will look into it. |
Thanks, I can confirm this does work but does require you use |
@cherniavskii @p-m-p I tried above solution, still same can you please see this comment #1151 (comment)
|
@dnikhila by looks of the code you pasted you're not setting import { render, screen } from '@testing-library/react'
import App from "./App"
function ResizeObserverMock(callback: () => void) {
let timeout: NodeJS.Timeout
return {
disconnect: () => clearTimeout(timeout),
observe: () => {
timeout = setTimeout(callback)
},
unobserve: () => clearTimeout(timeout),
}
}
describe('App', () => {
it('renders grid', async () => {
const originalObserver = window.ResizeObserver
window.ResizeObserver = ResizeObserverMock as any
render(<App />)
await screen.findAllByRole('row')
window.ResizeObserver = originalObserver
})
}) @cherniavskii it feels like this might be better handled internally somehow. I can resolve failing tests on a component that wraps the grid but for a more complex component that includes the wrapped grid component among other components it seems to still be an issue. Perhaps due to different uses of observers, I'll try to reproduce that and share. |
Yeah, testing the grid in JSDOM has always been a pain, see my OP |
We are also using react-testing-library and JSDOM. Tests verifying the content inside the Data Grid were passing for me in 6.0.4, but I was having issues testing a column with |
I am facing the same issues when testing DataGrid. The issues have appeared in version |
Also the same in DataGridPro from version 6.2.1 . |
Hi all. Here is a minimal example of this bug (there's a failing test): |
@brunomendola You need to mock
@Nic-S We recommend using a real browser to run tests, otherwise, problems like these may happen. We can't guarantee that a change we release won't break tests. We aim to guarantee that the APIs will be compatible, but tests are a different world. |
Within the MUI documentation we have this: Instead in the MUI-X package, we only have within virtualization a paragraph about testing. |
Are you suggesting that developers forego unit testing components that use Material UI? I am shocked to read this. |
None of the solutions worked for me. |
Same issue but with version 6.3.1 the only thing that gets rendered is the following: <div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-2 css-1o7apob-MuiGrid-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<div
class="MuiStack-root css-1q36rmd-MuiStack-root"
>
<div
class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
data-testid="PersonIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
/>
</svg>
</div>
<h6
class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap css-8u39c-MuiTypography-root"
/>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div> I have 3 rows taht should be rendered, which happens when using version 6.1.0 @m4theushw you might not have responsability if u are breaking the tests when you are changing the API, i completely agree on that, but in my case at least im just rendering a simple grid and writing a test to check if the text is displayed, my test doesnt access any Grid API, so i am expecting it will render the Grid just like it does when testing manually. I would say that the product you produce, specially being a commercial product should be test compatible. |
I created this repo with a basic DataGrid test using React Testing Library and JSDOM: https://github.com/cherniavskii/data-grid-testing |
@cherniavskii it works but forces some dirty type cast when using typescript, anyway is better then nothing, thank you |
In our case the solution was pretty inconsistent. Making it work at some test cases, but not in others, so I don't see this as a permanent solution, specially for bigger projects. UPDATE I've identified two PR's that changed things related to what is probably causing the issue, that were added after the last known working version
I will continue to investigate to see if I get more information related to it. |
Could you provide a test case where it's not working? I will look into it.
Yes, we changed the implementation of the internal auto sizer in #8091 |
I tried using the ResizeObserver mock (converted to TS - see this gist for a TS version) and it generally worked! 2 out of 3 of my tests passed. The third test that did not pass is trying to target an Actions button when a column is |
About that, keep in mind that by default the grid uses virtualization for rows AND columns, and you have to make it think there's more space available so that all your columns are rendered. From the top of my head, the usual defaults you get in JSDOM are 15-ish rows and 3 columns. I linked an issue in my OP, and especially this note #2945 (comment) might be helpful. I have tens of tests rendering grids in various conditions in our main project, using extra features like aggregations and grouping, and they all pass fine using the ResizeObsever mock I posted above. Cheers, |
Hey everyone, I tested a build from that PR in https://github.com/cherniavskii/data-grid-testing/tree/without-mock Does this build fix failing tests in your testing env? |
@cherniavskii in the project that I work on, this build made all tests pass 🥳 900+ test cases. |
@rafaelcmm Thanks for your feedback! |
@cherniavskii all failure tests passed. Thank you, it's awesome 😃 |
Duplicates
Latest version
Steps to reproduce 🕹
Not required
Current behavior 😯
All tests fail.
Expected behavior 🤔
All tests pass, or @mui explain what needs to be changed
Context 🔦
In JSDOM, we historically need to mock stuff to make the grid render (see #2945 for instance).
Starting with v6.2.1 grids do not render the "virtual scroller" area anymore, and having a look at the code does not tell me why. I need your help in fixing this and I'm totally open to mocking more stuff, it's just unclear what :)
Premium customer here
Your environment 🌎
npx @mui/envinfo
Order ID or Support key 💳 (optional)
31461
The text was updated successfully, but these errors were encountered: