How to write unit testing for function that return dom element based object

65 Views Asked by At

I'm writing the unit testing in react testing library.

I have a function that returns an object. under the I have a dom element in a key-value pair I tried searching in google. couldn't able to find the solution.

here is the function

export const transformResponse = (result: ISearchResponse, tab: ITabOption, searchText: string) => {
  let response: IOption[];
// do some logics
    response = (result as IClassicSearchResponse).queryResults.map((item: any) => {
      return {
        value: item.id,
        label: item.Name,
        renderElement: formatResult(item, searchText),
      };
    });
  return response;
};

under the formatResult method I'm returning the dom element

const formatResult = (entity: any, searchText: string) => {
  const name =entity.Name;
  return (
    <div data-testid="entitySearch-data">
      <span
        style={{
          fontSize: '11px',
          marginLeft: '5px',
        }}
      >
        sample name
      </span>
    </div>
  );
};

here you can find my test case

const mockResponse = [
  {
    "value": "40577570",
    "label": "test",
    "renderElement": {
      "type": "div",
      "key": null,
      "ref": null,
      "props": {
        "data-testid": "entitySearch-data",
        "style": {
          "padding": "0",
          "display": "table",
          "width": "100%"
        },
        "children": [
          {
            "type": "span",
            "key": null,
            "ref": null,
            "props": {
              "style": {
                "padding": "4px 0px 4px 0px",
                "display": "table-cell",
                "width": "85%"
              },
              "children": [
                {
                  "type": "span",
                  "key": null,
                  "ref": null,
                  "props": {
                    "children": {
                      "type": "b",
                      "key": null,
                      "ref": null,
                      "props": {
                        "children": {
                          "type": "span",
                          "key": null,
                          "ref": null,
                          "props": {
                            "children": [
                              "",
                              {
                                "type": "span",
                                "key": "0-1",
                                "ref": null,
                                "props": {
                                  "className": "css-f3tk0d",
                                  "children": "test"
                                },
                                "_owner": null
                              },
                              ", Inc."
                            ]
                          },
                          "_owner": null
                        }
                      },
                      "_owner": null
                    }
                  },
                  "_owner": null
                },
                {
                  "type": "div",
                  "key": null,
                  "ref": null,
                  "props": {
                    "children": {
                      "type": "span",
                      "key": null,
                      "ref": null,
                      "props": {
                        "children": [
                          "",
                          {
                            "type": "span",
                            "key": "0-1",
                            "ref": null,
                            "props": {
                              "className": "css-f3tk0d",
                              "children": "test"
                            },
                            "_owner": null
                          },
                          "GS:test"
                        ]
                      },
                      "_owner": null
                    }
                  },
                  "_owner": null
                },
                {
                  "type": "div",
                  "key": null,
                  "ref": null,
                  "props": {
                    "children": "test Exchanges | test"
                  },
                  "_owner": null
                }
              ]
            },
            "_owner": null
          },
          {
            "type": "span",
            "key": null,
            "ref": null,
            "props": {
              "children": {
                "type": "div",
                "key": null,
                "ref": null,
                "props": {
                  "children": {
                    "type": "span",
                    "key": null,
                    "ref": null,
                    "props": {
                      "children": {
                        "type": "b",
                        "key": null,
                        "ref": null,
                        "props": {
                          "children": [
                            " ",
                            "Public Company",
                            " "
                          ]
                        },
                        "_owner": null
                      }
                    },
                    "_owner": null
                  }
                },
                "_owner": null
              }
            },
            "_owner": null
          }
        ]
      },
      "_owner": null
    },
  }
]

it('transform response', () => {
    const result = transformResponse(mockResult, mockTab, 'test');
    expect(result).toBe(mockResponse);
  });
0

There are 0 best solutions below