question

Upvotes
Accepted
ricardo.santana avatar image
21 ●1 ●1 ●1

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>

  1. 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

  1. Can I even trigger an event for the components. E.g fireEvent.click for a toggle?
  2. At least how can I test if the label or the checkedLabel are populated with the right value?
    1. E.g. expect(screen.getByRole("switch")).toHaveAttribute("label", "USD")
    2. Note: toggle uses the role ‘switch’


Many thanks for your help

#technology#producttestingelement-frameworktypescript
icon clock
10 |1500

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

wasin.w avatar image   wasin.w

Hello @ricardo.santana

Thank you for your participation in the forum. Is the reply below satisfactory in resolving your query?


If so please can you click the 'Accept' text next to the appropriate reply? This will guide all community members who have a similar question.

Thanks,


AHS

2 Answers

· Write an Answer
Upvotes
Accepted
ricardo.santana avatar image
21 ●1 ●1 ●1

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!

icon clock
10 |1500

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

raksina.samasiri avatar image   raksina.samasiri

Thank you for your participation in the forum

Upvotes
Jirapongse avatar image
79.2k ●251 ●52 ●74

@ricardo.santana

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.


icon clock
10 |1500

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

ricardo.santana avatar image ricardo.santana
Thanks for your help, but those tests are for the EF component,

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.