Javascript 反应&；Jest：如何为依赖于外部函数的组件编写测试

图1中的组件有一个需要第三个参数的函数，以便组件能够正常工作并在UI中显示数据，我为paginate函数编写了单元测试。但是，调用paginate函数时，第三个参数丢失，测试成功 当我修改paginate.js本身并且组件损坏时，如何编写一个测试来提醒我

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;
};

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>
    );
  }
}

import React，{Component}来自“React”；
从“/BlogPost”导入BlogPost；
从“react引导/CardColumns”导入CardColumns；
从“./../utils/paginate”导入{paginate}”；
导出默认类BlogContainer扩展组件{
render（）{
const currentPosts=paginate（this.props.posts，this.props.currentPage）；
返回(
{currentPosts.map（post=>{
返回(
);
})}
);
}
}

如果不提供参数，它将默认为未定义

要解决此问题，可以在顶部添加支票

export const paginate=（posts、currentPage、numberpage）=>{
如果（！posts | | |！currentPage | |！NumberPage）{
//返回您的错误
}
...
}

它继续工作的原因是因为numberpage未定义

const firstIndex=undefined*currentPage结果为NaN

const lastIndex=NaN+numberpage结果为NaN

const currentPosts=posts.slice（NaN，NaN）结果为[]

returncurrentposts