testforworkhh commented on issue #10478:
URL: https://github.com/apache/echarts/issues/10478#issuecomment-1627789710
> I'm seeing this during jest testing and am providing parent width and
height (and have also attempted to set window innerHeight and innerWidth in
various ways). Just a warning, but would love if we could resolve somehow.
>
> ```
> console.warn
> Can't get DOM width or height. Please check dom.clientWidth and
dom.clientHeight. They should not be 0.For example, you may need to call this
in the callback of window.onload.
>
> at Object.init$1 [as init]
(node_modules/echarts/lib/core/echarts.js:2226:15)
> at
EChartsReact.Object.<anonymous>.EChartsReactCore.getEchartsInstance
(node_modules/echarts-for-react/src/core.tsx:89:68)
> at
EChartsReact.Object.<anonymous>.EChartsReactCore.updateEChartsOption
(node_modules/echarts-for-react/src/core.tsx:160:33)
> at EChartsReact.Object.<anonymous>.EChartsReactCore.renderNewEcharts
(node_modules/echarts-for-react/src/core.tsx:114:34)
> at
EChartsReact.Object.<anonymous>.EChartsReactCore.componentDidMount
(node_modules/echarts-for-react/src/core.tsx:31:10)
> at commitLifeCycles
(node_modules/react-dom/cjs/react-dom.development.js:20663:24)
> at commitLayoutEffects
(node_modules/react-dom/cjs/react-dom.development.js:23426:7)
> ```
>
> ```
> test('Renders scatter plot ReportWidget', () => {
> window.innerWidth = 1200
> window.innerHeight = 800
> render(
> <ApolloWrapper>
> <Router>
> <ThemeProvider theme={theme}>
> <div style={{ width: '600px', height: '400px' }}>
> <ReportWidget report="scatter" />
> </div>
> </ThemeProvider>
> </Router>
> </ApolloWrapper>
> )
> })
> ```
>
> Have also tried other ways of setting window size before the test, both in
`beforeEach()` and in the test itself:
>
> ```
> # Global provided by jest
> global.innerHeight = 800
> global.innerWidth = 1200
> # Object.defineProperty
> Object.defineProperty(window, 'innerWidth', {
> writable: true,
> configurable: true,
> value: 1200,
> })
> Object.defineProperty(window, 'innerHeight', {
> writable: true,
> configurable: true,
> value: 800,
> })
> ```
>
> echarts 5.1.2 echarts-for-react 3.0.1 jest-dom 5.14.1
same problem. when running test with getByText in <App /> , ECharts
component returned the error "Can't get DOM width or height. Please check
dom.clientWidth and dom.clientHeight." ECharts component is a child in <App />.
This error aborts the test.
After spending almost a day looking for a solution, I found the answer
https://stackoverflow.com/a/55100373
I use vitest, and react-router-dom. My solution:
```
import { expect, it } from "vitest";
import * as echarts from "echarts";
import { BrowserRouter } from "react-router-dom";
let spy: any;
beforeAll(() => {
spy = vi.spyOn(echarts, 'getInstanceByDom')
.mockImplementation(
() => ({
hideLoading: vi.fn(),
setOption: vi.fn(),
showLoading: `vi.fn()`
})
);
});
afterAll(() => {
spy.mockRestore();
});
it('render App', () => {
render( <App/>, {wrapper: BrowserRouter});
expect(screen.getByText(/I am Child1/i)).toBeInTheDocument();
});
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
