Question

我正在尝试模拟服务类来测试 React 组件。但是 jest.mock 的模块工厂不起作用。

搜索组件：

import React, { useState } from "react";
import SearchService from "../../services/SearchService";

export default function Search() {
  const [searchResults, setSearchResults] = useState([]);

  function doSearch() {
    const service = new SearchService();
    service.search().then(setSearchResults);
  }

  return (
    <div className="component-container">
      <div>
        <button onClick={doSearch}>search</button>
      </div>
      {searchResults.map((result) => (
        <div key={result}>{result}</div>
      ))}
    </div>
  );
}

搜索服务：

export default class SearchService {
  search = function () {
    return new Promise((resolve) => {
      setTimeout(
        () => resolve(["result 1", "result 2", "result 3", "result 4"]),
        1000
      );
    });
  };
}

测试文件：

import React from "react";
import { screen, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { act } from "react-dom/test-utils";
import Search from "../features/search/Search";

jest.mock("../services/SearchService", () => {
  return jest.fn().mockImplementation(() => {
    return { search: jest.fn().mockResolvedValue(["mock result"]) };
  });
});

test("Search", async () => {
  render(<Search />);
  const button = screen.getByRole("button");
  expect(button).toBeDefined();
  act(() => {
    userEvent.click(button);
  });
  await screen.findByText("mock result");
});

这与 Jest documentation example 的结构相同。在上面的代码中，我通过 jest.mock 的模块工厂参数传递模拟实现。但它不起作用。当我记录新的 SerchService() 时，我得到“mockConstructor {}”，当我运行测试时，它抛出错误“service.search is not a function”。

当我将测试文件更改为...

import React from "react";
import { screen, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { act } from "react-dom/test-utils";
import Search from "../features/search/Search";
import SearchService from "../services/SearchService";

jest.mock("../services/SearchService");

test("Search", async () => {
  SearchService.mockImplementation(() => {
    return { search: jest.fn().mockResolvedValue(["mock result"]) };
  });
  render(<Search />);
  const button = screen.getByRole("button");
  expect(button).toBeDefined();
  act(() => {
    userEvent.click(button);
  });
  await screen.findByText("mock result");
});

它有效... 我有点理解为什么它以第二种方式工作，我猜就像使用 jest.spyOn 一样。我无法理解的是为什么它不适用于第一种方法。

我做错了什么？如何使用 jest.mock 模拟模块实现而不在每个测试中调用 .mockImplementation？

Answer 1

我发现文档有问题，工厂需要返回一个函数（）（不是箭头函数），所以我将模拟更改为以下内容并且可以正常工作：

library(dplyr)
library(tidyr)
library(stringr)
bpdata %>% 
    unite(bpcols, everything(), sep="/") %>% 
    separate(bpcols, into = str_c(c('systolic', 'diastolic'), 
       rep(seq_along(bpdata), each = 2)), convert = TRUE)
#  systolic1 diastolic1 systolic2 diastolic2 systolic3 diastolic3
#1       120         89       130         69       115         90
#2       110         70       120         90       112         71
#3       121         78       125         72       135         80

发现于 this post。

玩笑模拟工厂不适用于类模拟

1 个答案: