0

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);
  });
James Z
  • 12,209
  • 10
  • 24
  • 44
Vinoth
  • 972
  • 1
  • 16
  • 47
  • What's the issue? Any error? – Lin Du Jun 01 '23 at 03:53
  • You are returning a JSX component, not a "dom element". You will need to use a testing library that works with react. I recommend that you google something like "react unit testing" to read about how to do this. – Code-Apprentice Jun 01 '23 at 05:01
  • @LinDu test case failed because the function returned the dom element in the render element but in the mockResponse I'm check with json data so its getting failed – Vinoth Jun 01 '23 at 08:24
  • What's `mockResult`? How did you create `mockResponse`(Manually?)? What are you trying to do? Can you use https://jestjs.io/docs/snapshot-testing? – Lin Du Jun 01 '23 at 08:33
  • @LinDu I added in this question const mockResponse I converted the actual data by using JSON.stringify() and I saved in the mockResponse – Vinoth Jun 01 '23 at 09:05

0 Answers0