how to write unit test for (EF) Element Framework in react 18?
Hi there,
I want to write unit tests for my react components in typescript. I am using (EF) Element Framework. React 18 and @testing-library/react. Basically, the default set up for create-react app.
I can only test functions. I cannot test any of the functionality of the EF components.
e.g. the debug methods show this for the toggle component
<body>
<ef-tooltip
ref="title-override"
/>
<div>
<ef-toggle />
</div>
</body>
- How can I select elements?
const { container } = render(<CurrencyPairToggle value={value} callback={setState} />)
const toggle = container.querySelector('ef-toggle')
debug()
This code works, but I do not think this is the right way of doing this.
Normal search variants do not work. E.g. queryByText, queryByRole
- Can I even trigger an event for the components. E.g fireEvent.click for a toggle?
- At least how can I test if the label or the checkedLabel are populated with the right value?
- E.g. expect(screen.getByRole("switch")).toHaveAttribute("label", "USD")
- Note: toggle uses the role ‘switch’
Many thanks for your help
Best Answer
-
Trying using the normal @testing-library/reac for elements like toggle.
If your component is more complex you might try to use the container property from render and trigger the event by using a createEvent from @testing-library/react, Check the dummy code:
import React from "react";
import { render, fireEvent, createEvent, waitFor } from "@testing-library/react";
import YourComponent from "./YourComponent";
const testData = [
{
label: "Spot",
value: "Spot",
selected: true,
},
{
label: "Tenor 2",
value: "Tenor 2",
},
];
describe("<YourComponent />", () => {
const setState = jest.fn();
it("should match with snapshot", () => {
render(<YourComponent data={testData} callback={setState} />);
expect(render(<YourComponent data={testData} callback={setState} />)).toMatchSnapshot();
});
it("should call the callback fn", async () => {
const callback = async (value: string) => {
await waitFor(() => {
expect(value).toEqual("Spot");
});
};
const { container } = render(<YourComponent data={testData} callback={callback} />);
const element = container.querySelector("ef-combo-box") as Element;
const event = createEvent(
"value-changed",
element as Element,
{
detail: { value: "Spot" },
},
{ EventType: "CustomEvent" },
);
fireEvent(element, event);
fireEvent.keyUp(element as Element, { key: "Enter", code: "Enter" });
});
});
Good luck!
0
Answers
-
Thanks for reaching out to us.
I found the sample EF test scripts on GitHub. They are in TypeScript.
You can refer to those sample test scripts.
I hope that this information is of help.
0 -
Thanks for your help, but those tests are for the EF component,0
Categories
- All Categories
- 6 AHS
- 37 Alpha
- 161 App Studio
- 4 Block Chain
- 4 Bot Platform
- 16 Connected Risk APIs
- 47 Data Fusion
- 30 Data Model Discovery
- 608 Datastream
- 1.3K DSS
- 577 Eikon COM
- 4.9K Eikon Data APIs
- 7 Electronic Trading
- Generic FIX
- 7 Local Bank Node API
- Trading API
- 2.7K Elektron
- 1.3K EMA
- 236 ETA
- 519 WebSocket API
- 33 FX Venues
- 10 FX Market Data
- 1 FX Post Trade
- 1 FX Trading - Matching
- 12 FX Trading – RFQ Maker
- 5 Intelligent Tagging
- 2 Legal One
- 20 Messenger Bot
- 2 Messenger Side by Side
- 9 ONESOURCE
- 7 Indirect Tax
- 59 Open Calais
- 264 Open PermID
- 39 Entity Search
- 2 Org ID
- PAM
- PAM - Logging
- 8.4K Private Comments
- 6 Product Insight
- Project Tracking
- ProView
- ProView Internal
- 20 RDMS
- 1.4K Refinitiv Data Platform
- 367 Refinitiv Data Platform Libraries
- 3 Refinitiv Due Diligence
- LSEG Due Diligence Portal API
- 3 Refinitiv Due Dilligence Centre
- Rose's Space
- 1.1K Screening
- 18 Qual-ID API
- 13 Screening Deployed
- 23 Screening Online
- 10 World-Check Customer Risk Screener
- 990 World-Check One
- 44 World-Check One Zero Footprint
- 45 Side by Side Integration API
- Test Space
- 3 Thomson One Smart
- 1.2K TR Internal
- Global Hackathon 2015
- 2 Specialists Who Code
- 10 TR Knowledge Graph
- 150 Transactions
- 142 REDI API
- 1.7K TREP APIs
- 4 CAT
- 21 DACS Station
- 117 Open DACS
- 1.1K RFA
- 103 UPA
- 172 TREP Infrastructure
- 224 TRKD
- 886 TRTH
- 5 Velocity Analytics
- 5 Wealth Management Web Services
- 59 Workspace SDK
- 9 Element Framework
- 5 Grid
- 13 World-Check Data File
- Yield Book Analytics
- 46 中文论坛