Reactjs 将JS组件代码拆分为单独的API调用函数在导入提取的函数时测试失败

这是目录结构

resources/js/containers/Grid
├── Grid.js
├── getAllBlogsPreview.js
└── package.json

getAllBlogsPreview

导入到网格中

import getAllBlogsPreview from "./getAllBlogsPreview";

是一个调用axis并返回带有某些数据的结果的函数

export default function getAllBlogsPreview({ blogs = [], showGrid = false }) {
    Axios.get("/api/blogs")
        .then(response => {
            blogs = response.data;
            showGrid = false;
        })
        .catch(error => {
            console.log(error);
        });
    let result = {
        blogs: blogs,
        showGrid: showGrid
    };
    return result;
}

将其移出，因为无法使用

componentDidMount

方法和某些直接执行这些api调用的

refreshttable

方法测试组件。现在在我的组件中

componentDidMount() {
    this.updateBlogsTable();
}

updateBlogsTable() {
    let result = getAllBlogsPreview();
    this.setState({ blogs: result.blogs });
    this.setState({ showGrid: result.showGrid });
}

我的想法是，我应该能够模拟

getAllBlogsPreview

的实现，从而测试网格，而不会被解决承诺所束缚

测试失败，因为它试图从测试文件本身加载

getAllBlogsPreview

// the component to test
import Grid from "../../containers/Grid/Grid";
import getAllBlogsPreview from "../../containers/Grid/getAllBlogsPreview";
jest.mock("getAllBlogsPreview");

    describe("Blog Grid", () => {
        const result = {
            blogs: {
                data: [
                    {
                        title: "title one",
                        published: false,
                        publish_date: null,
                        slug: "title-one"
                    }
                ],
                links: {
                    self: "link-value",
                    first: "http://adminpanel.test/api/blogs?page=1",
                    last: null,
                    prev: null,
                    next: null
                },
                meta: {
                    current_page: 1,
                    from: 1,
                    path: "http://adminpanel.test/api/blogs",
                    per_page: 20,
                    to: 2
                }
            },
            showGrid: true
        };
        const getAllBlogsPreviewSpy = getAllBlogsPreview;

        beforeEach(() => {
            getAllBlogsPreviewSpy.mockImplementation(() => result);
        });
        afterEach(() => {
            getAllBlogsPreviewSpy.mockRestore();
        });

错误

FAIL   UnitTests  resources/js/tests/Blogs/Grid.test.js
  ● Test suite failed to run

    Cannot find module 'getAllBlogsPreview' from 'Grid.test.js'

       9 | import Grid from "../../containers/Grid/Grid";
      10 | import getAllBlogsPreview from "../../containers/Grid/getAllBlogsPreview";
    > 11 | jest.mock("getAllBlogsPreview");
         |      ^
      12 | 
      13 | describe("Blog Grid", () => {
      14 |     const result = {

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:276:11)
      at Object.<anonymous> (tests/Blogs/Grid.test.js:11:6)

FAIL UnitTests resources/js/tests/Blogs/Grid.test.js
● 测试套件无法运行
无法从“Grid.test.js”中找到模块“getAllBlogsPreview”
9 |从“../../containers/Grid/Grid”导入网格；
10 |从“../../containers/Grid/getAllBlogsPreview”导入getAllBlogsPreview；
>11 |开玩笑的模仿（“getAllBlogsPreview”）；
|      ^
12 | 
13 |描述（“博客网格”，（）=>{
14 |常数结果={
在Resolver.resolveModule（../../node_modules/jest resolve/build/index.js:276:11）
at对象。（tests/Blogs/Grid.test.js:11:6）

您应该模拟模块，而不仅仅是名称（它不知道模块的名称，它需要一个路径）：

---

这里有一个更详细的解释：

那么mock实现将是

之前（（）=>{getAllBlogsPreview.mockImplementation（（）=>{return result；}）；}）；

因为我想返回数据而不必处理

Promise

jest.mock("../../containers/Grid/getAllBlogsPreview");