Category: React

Sometimes, we want to test a className with the Jest and React testing library.

In this article, we’ll look at how to test a className with the Jest and React testing library.

How to test a className with the Jest and React testing library?

To test a className with the Jest and React testing library, we can check if any element with the given class name exists with getElementsByClassName.

For instance, we write

it("Renders with a className equal to the variant", () => {
  const { container } = render(<Button variant="default" />);
  expect(container.getElementsByClassName("default").length).toBe(1);
});

to call render to render the Button component.

Then we get the container element and call getElementsByClassName with the class name to check if any element with class name default exists in the container element.

We check if the length is bigger than 0 to see if any element with the class name exists.

Conclusion

To test a className with the Jest and React testing library, we can check if any element with the given class name exists with getElementsByClassName.

Sometimes, we want to toggle class on click with React.

In this article, we’ll look at how to toggle class on click with React.

How to toggle class on click with React?

To toggle class on click with React, we can set the className prop.

For instance, we write

function MyComponent(props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div className={isActive ? "your-class" : null} onClick={toggleClass}>
      <p>{props.text}</p>
    </div>
  );
}

to create the MyComponent component.

In it, we have the isActive state.

We set it with the setActive function in the toggleClass function.

In the div, we set the className prop to 'your-class' if isActive is true and null otherwise.

And we set onClick to toggleClass so toggleClass is called when we click on the button.

Conclusion

To toggle class on click with React, we can set the className prop.

Sometimes, we want to simulate a button click in Jest and JavaScript.

In this article, we’ll look at how to simulate a button click in Jest and JavaScript.

How to simulate a button click in Jest and JavaScript?

To simulate a button click in Jest and JavaScript, we call the Enzyme simulate method.

For instance, we write

import React from "react";
import { shallow } from "enzyme";
import Button from "./Button";

describe("Test Button component", () => {
  it("Test click event", () => {
    const mockCallBack = jest.fn();

    const button = shallow(<Button onClick={mockCallBack}>Ok!</Button>);
    button.find("button").simulate("click");
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

to call shallow to shallow mount the Button component.

Then we call find to find the button element and call simulate with 'click' to simulate a click on it.

Finally, we use expect to check what we expect.

Conclusion

To simulate a button click in Jest and JavaScript, we call the Enzyme simulate method.

Sometimes, we want to set the default route to another Route in React Router.

In this article, we’ll look at how to set the default route to another Route in React Router.

How to set the default route to another Route in React Router?

To set the default route to another Route in React Router, we can use the Navigate component.

For instance, we write

<Routes>
  <Route path="/" element={<Navigate to="/searchDashboard" />}>
    <Route path="searchDashboard" element={<SearchDashboard />} />
    <Route path="*" element={<Navigate to="/" />} />
  </Route>
</Routes>

to set the route for path / to navigate to the /searchDashboard route.

Likewise, we have the * catch all route that does the same thing.

And /searchDashboard renders the SearchDashboard component.

Conclusion

To set the default route to another Route in React Router, we can use the Navigate component.

Sometimes, we want to make view 80% width of parent in React Native.

In this article, we’ll look at how to make view 80% width of parent in React Native.

How to make view 80% width of parent in React Native?

To make view 80% width of parent in React Native, we can calculate the width with JavaScript.

For instance, we write

import React, { useEffect, useState } from "react";
import { Dimensions, View, Text, StyleSheet } from "react-native";

const Comp = () => {
  const [screenData, setScreenData] = useState(Dimensions.get("window").width);

  useEffect(() => {
    const onChange = () => {
      setScreenData(Dimensions.get("window").width);
    };
    Dimensions.addEventListener("change", onChange);

    return () => {
      Dimensions.removeEventListener("change", onChange);
    };
  });

  return (
    <View style={{ width: screenData * 0.8 }]}>
      <Text>hello</Text>
    </View>
  );
};

export default Comp;

to watch for screen dimensions change by adding the change event listener to the Dimensions object.

We call onChange with the change event is emitted by Dimensions.

In onChange, we call setScreenData set the screenData state to the screen’s width.

And we set the width of the View to screenData * 0.8.