React & Jest: How to write a test for a component that depends on external function

Question

The component in picture 1 has a function that needs a third parameter so that the component can work properly and display data in the UI, I wrote unit test for the paginate function. However, test success while paginate function is missing the third parameter when it's called How do I write a test to alert me whenever I modify the paginate.js itself and the component breaks?

paginate.js:

export const paginate = (posts, currentPage, numberPerPage) => {
 const firstIndex = numberPerPage * currentPage;
 const lastIndex = firstIndex + numberPerPage;
 const currentPosts = posts.slice(firstIndex, lastIndex);
 return currentPosts;
};

export const getPages = (posts, numberPerPage) => {
 const numberOfPages = Math.ceil(posts.length / numberPerPage);
 let pages = [];
 for (let i = 0; i < numberOfPages; i++) {
   pages.push(i);
 }
 return pages;
};

test for paginate.js:

import { paginate, getPages } from "../utils/paginate";

describe("paginate function", () => {
  it("do pagination", () => {
    const posts = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15"
    ];
    const expectedRes1 = ["1", "2", "3", "4", "5", "6"];
    const expectedRes2 = ["7", "8", "9", "10", "11", "12"];
    const expectedRes3 = ["13", "14", "15"];

    expect(paginate(posts, 0, 6)).toEqual(expectedRes1);
    expect(paginate(posts, 1, 6)).toEqual(expectedRes2);
    expect(paginate(posts, 2, 6)).toEqual(expectedRes3);

    expect(getPages(posts, 6)).toEqual([0, 1, 2]);
  });
});

BlogContainer.js:

import React, { Component } from "react";
import BlogPost from "./BlogPost";
import CardColumns from "react-bootstrap/CardColumns";
import { paginate } from "../../utils/paginate";

export default class BlogContainer extends Component {
  render() {
    const currentPosts = paginate(this.props.posts, this.props.currentPage);
    return (
      <CardColumns>
        {currentPosts.map(post => {
          return (
            <BlogPost
              key={post.id}
              title={post.title}
              body={post.body}
              picture="image.jpg"
            ></BlogPost>
          );
        })}
      </CardColumns>
    );
  }
}

Answer 1

If you don't provide an argument, it will default to undefined.

To fix this, you can add a check at the top.

export const paginate = (posts, currentPage, numberPerPage) => {
  if (!posts || !currentPage || !numberPerPage) {
    // Return your error
  }
  ...
}

The reason it keeps working is because when numberPerPage is undefined.

const firstIndex = undefined * currentPage; results in NaN

const lastIndex = NaN + numberPerPage; results in NaN

const currentPosts = posts.slice(NaN, NaN); results in []

return currentPosts;