Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to write unit test cases in React?

Labrador retriever puppy walking on green grass

To write unit tests in React, we can use the react-dom/test-utils package.

For instance, we write

import React from "react";

export default function Hello(props) {
  if (props.name) {
    return <h1>Hello, {props.name}!</h1>;
  } else {
    return <span>Hey, stranger</span>;
  }
}

in hello.js.

Then in hello.test.js, we write

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Hello from "./hello";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("renders with or without a name", () => {
  act(() => {
    render(<Hello />, container);
  });
  expect(container.textContent).toBe("Hey, stranger");

  act(() => {
    render(<Hello name="Jenny" />, container);
  });
  expect(container.textContent).toBe("Hello, Jenny!");

  act(() => {
    render(<Hello name="Margaret" />, container);
  });
  expect(container.textContent).toBe("Hello, Margaret!");
});

to add a test for the Hello component.

We mount the component with render

Then we check the rendered content with expect.

The beforeEach callback runs before each test.

We use

container = document.createElement("div");

to create the render target element.

And the afterEach callback runs after each test.

We clean up after our tests in the afterEach callback.

Categories
React Native Answers

How to remove top header from the navigation with React Native?

Labrador retriever puppy walking on green grass

To remove top header from the navigation with React Native, we can set the static navigationOptions.header propety to null or callnavigation.setOptions.

For instance, we write

export default class Login extends Component {
  static navigationOptions = {
    header: null,
  };
}

to set the navigationOptions.header property to null in our component to remove the header.

Also, we can write

setTimeout(() => {
  navigation.setOptions({
    header: () => (
      <View style={{ backgroundColor: "white" }}>
        <Text
          style={[
            { color: "white" },
            Platform.OS === "android" ? { fontSize: 20 } : { fontSize: 1 },
          ]}
        >
          .
        </Text>
      </View>
    ),
  });
}, 1);

to call call navigation.setOptions with an object with the header property set to a white View to hide the header.

Categories
React Native Answers

How to open email client with React Native?

Labrador retriever puppy walking on green grass

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

Categories
React Native Answers

How to open email client with React Native?

Labrador retriever puppy walking on green grass

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

Categories
React Answers

How to use setState callback on React hooks?

Labrador retriever puppy walking on green grass

To use setState callback on React hooks, we can use the useEffect hook.

For instance, we write

function Comp() {
  const [counter, setCounter] = useState(0);

  const doSomething = () => {
    setCounter(123);
  };

  useEffect(() => {
    console.log("Do something after counter has changed", counter);
  }, [counter]);

  //..
}

to create the counter state with useState.

Then we watch the counter state for changes with the useEffect hook called with [counter] as the 2nd argument.

The useEffect callback will run whenever counter changes.