React & Jest: Как написать тест для компонента, который зависит от внешней функции - PullRequest
Новая
       46

React & Jest: Как написать тест для компонента, который зависит от внешней функции

0 голосов
/ 14 февраля 2020

Code of BlogContainer component

Компонент на рисунке 1 имеет функцию, которой требуется третий параметр, чтобы компонент мог правильно работать и отображать данные в пользовательском интерфейсе, для которого я написал модульный тест функция paginate. Тем не менее, при успешном тестировании, пока в функции paginate отсутствует третий параметр при его вызове. Как написать тест, предупреждающий меня, когда я изменяю 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;
};

тест на 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>
    );
  }
}

1 Ответ

0 голосов
/ 14 февраля 2020

Если вы не предоставите аргумент, по умолчанию он будет неопределенным.

Чтобы исправить это, вы можете добавить проверку вверху. 

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

Причина, по которой он сохраняется работа происходит потому, что когда numberPerPage не определено.

const firstIndex = undefined * currentPage; приводит к NaN

const lastIndex = NaN + numberPerPage; приводит к NaN

const currentPosts = posts.slice(NaN, NaN); приводит к []

return currentPosts;

...