Tag: reactjs

Mock a function or setState using jest in ReactJS.

lets assume that we need to mock setStatus(). So, in test file we will mock by using jest as follows.

const setStatus = jest.fn();

const renderUserProfile = (props = {}) => {
    return render(
                <UserProfile status={true} setStatus={setStatus} />
              )
    }

const userProps1 = Props = {
 status: true,
 setStatus
}

const userProps2 = Props = {
 status: false,
 setStatus
}

describe('Component UserProfile', () => {
  it("user status with true", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Online");
    fireEvent.click(userProps1);
    expect(setStatus).toHaveBeenCalled();
  });
  it("user status with false", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Offline");
    fireEvent.click(userProps2);
    expect(setStatus).toHaveBeenCalled();
  });

})

Displaying comma separated elements using map function from Array of Objects – ReactJS

lets take an example of the following Array

const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

lets use map function to display names of class-5 in the same row.

App.js


import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name);

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}

Output : ABC

if we use .toString() to the map function, comma separated names will display.

import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name).toString();

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}


Output : A,B,C