Comments (4)
Hi @Mike-Han! The popper tests fine when I set it up correctly :). For the NumericInput a mock will work, thanks alot!
from arcgis-experience-builder-sdk-resources.
@sweco-sepjea
The widgetRender
is for widget only. For component, you can use render
, withStoreRender
, or other renders depends on whether the component depends on a store or theme.
from arcgis-experience-builder-sdk-resources.
@qlqllu I have tried the other renders. Same problem, some jimu-ui components always breaks the test. Also, if I include a jimu-ui Popper or NumericInput inside my main widget.ts it will break testing the entire widget using widgetRender.
All of these tests will fail:
import { React, getAppStore } from "jimu-core";
import { withStoreRender, render, widgetRender } from "jimu-for-test";
import { Popper } from "jimu-ui";
const sRender = withStoreRender(getAppStore());
const wRender = widgetRender();
const TestComponentPopper: React.FC = () => {
const ref = React.useRef();
return (
<Popper reference={ref} open showArrow>
test
</Popper>
);
};
describe("test storybook components", () => {
it("popper storeRender", async () => {
const { findByText } = sRender(<TestComponentPopper />);
expect(await findByText("test")).toBeDefined();
});
it("popper render", async () => {
const { findByText } = render(<TestComponentPopper />);
expect(await findByText("test")).toBeDefined();
});
it("popper widgetRender", async () => {
const { findByText } = wRender(<TestComponentPopper />);
expect(await findByText("test")).toBeDefined();
});
});
Because of errors like these:
test storybook components › popper
TypeError: Cannot read properties of undefined (reading 'length')
239 | word-break: break-all;
240 | word-wrap: break-word;
> 241 | span {
| ^
242 | color: ${r};
243 | text-decoration: underline;
244 | }
at zt (dist/jimu-ui/index.js:241:54352)
at At (dist/jimu-ui/index.js:241:54406)
at dist/jimu-ui/index.js:241:74051
at no (dist/jimu-core/react-dom.js:34:58876)
at jo (dist/jimu-core/react-dom.js:34:68394)
at Fo (dist/jimu-core/react-dom.js:34:67728)
at Do (dist/jimu-core/react-dom.js:34:67386)
at Vu (dist/jimu-core/react-dom.js:34:114544)
at Ei (dist/jimu-core/react-dom.js:34:98324)
at ki (dist/jimu-core/react-dom.js:34:98252)
at wi (dist/jimu-core/react-dom.js:34:98115)
at di (dist/jimu-core/react-dom.js:34:95102)
at ui (dist/jimu-core/react-dom.js:34:92450)
at qi (dist/jimu-core/react-dom.js:34:108770)
at dist/jimu-core/react-dom.js:34:110190
at hi (dist/jimu-core/react-dom.js:34:95480)
at Ji (dist/jimu-core/react-dom.js:34:110175)
at Object.n.render (dist/jimu-core/react-dom.js:34:117625)
at node_modules/@testing-library/react/dist/pure.js:101:25
at pi (dist/jimu-core/react-dom.js:34:95392)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.render (jimu-for-test/lib/test-utils.tsx:17:58)
at jimu-for-test/lib/test-utils.tsx:177:59
from arcgis-experience-builder-sdk-resources.
Hi @sweco-sepjea, for the test of Popper
, a DOM node
is necessary as prop reference
, but it's a React.MutableRefObject
in your test code.
You can use it like this:
const TestComponentPopper: React.FC = () => {
const ref = React.useRef()
return (<>
<Button ref={ref}>reference</Button>
<Popper reference={ref.current} open showArrow>
test
</Popper></>
)
}
The NumericInput
component does have a problem in the test now, you can temporarily use mock instead:
jest.mock('jimu-ui', () => {
return {
...jest.requireActual<Record<string, any>>('jimu-ui'),
NumericInput: (props) => {
const { onAcceptValue, ...others } = props
const [value, setValue] = React.useState()
const handleChange = (e): void => {
setValue(e.target.value)
}
const handleBlur = (): void => {
onAcceptValue(value)
}
return (
<input
type='number'
onChange={handleChange}
onBlur={handleBlur}
className='jimu-input jimu-input-sm jimu-numeric-input jimu-numeric-input-input'
{...others}
/>
)
}
}
})
from arcgis-experience-builder-sdk-resources.
Related Issues (20)
- Translations in widgets HOT 3
- Poor performance on Identify in arcgis experience HOT 1
- react-data-grid sample not working if updated to the latest version - 7.0.0-beta.14 HOT 1
- jimu-icons not added to jest.config in latest version of ExB developer edition HOT 6
- message-subscriber filterMessageType 1.9 Breaking Change HOT 2
- message-subscriber doesn't handle empty selection
- Query property not adequate for data sources that come from an array
- Some lint errors need to fix for sample widget. HOT 1
- Experience Builder Doc Branch Name HOT 1
- Control the widget state: openness bug HOT 2
- Translation Custom Widget HOT 2
- Update the translation widget HOT 1
- custom widgets throws exception when no settings page is included HOT 1
- BA Widget - Invalid token when accessing Infographics in portal HOT 1
- Accessing ArcGISIdentityManager from @esri/arcgis-rest-request HOT 1
- 'test theme variable' fails
- ArcGIS Experience Builder widget with ModalHeader component fails to run Jest tests HOT 3
- ArcGIS Experience Builder widget with Link component fails to run Jest tests HOT 3
- Selecting features from datasource HOT 4
- Commit d455a00 broke the repo HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from arcgis-experience-builder-sdk-resources.