ReactJS组件状态即使在玩笑/酶测试中成功设置后也返回空数据

Question

我有一个简单的方法可以从API提取数据并更新Grid组件中的状态

//in the constructor
this.state = {
    blogs: []
};

//method here
updateBlogsTable() {
    Axios.get("/api/blogs").then(response => {
        this.setState({ blogs: response.data.data });
    });
    //omitting catch block for brevity
}

[从componentDidMount和刷新按钮的click处理程序调用此方法

componentDidMount() {
    this.updateBlogsTable();
}

和

<Button
    id="refreshBlog"
    icon="pi pi-refresh"
    style={{ float: "right" }}
    onClick={this.updateBlogsTable}
/>

刷新按钮测试失败

describe("Blog Grid", () => {
  let response = {
      data: {
          data: [
              {
                  title: "title one",
                  published: false,
                  publish_date: null,
                  slug: "title-one"
              },
              {
                  title: "title two",
                  published: false,
                  publish_date: null,
                  slug: "title-two"
              }
          ],
          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
          }
      }
  };

  it("refreshes blogs", () => {
      axios.get.mockImplementationOnce(() => Promise.resolve(response));
      const grid = mount(<Grid />);
      let refreshResponse = Object.assign({}, response);
      refreshResponse.data.data.push({
          title: "title three",
          published: true,
          publish_date: null,
          slug: "title-three"
      });
      axios.get.mockImplementationOnce(() =>
          Promise.resolve(refreshResponse)
      );
      grid.find("#refreshBlog")
          .at(0)
          .simulate("click");
      expect(grid.state().blogs).toEqual(refreshResponse.data.data);
  });


});

[grid.state().blogs返回未通过测试的[]。

FAIL resources/js/tests/Blogs/Grid.test.js (5.765s)

  Blog Grid
    ✓ renders without errors (235ms)
    ✕ refreshes blogs (161ms)

  ● Blog Grid › refreshes blogs

    expect(received).toEqual(expected) // deep equality

当我将console.log(this.state.blogs);添加到updateBlogsTable()方法时；我可以看到

console.log resources/js/views/Blogs/Grid/Grid.js:25
[ { title: 'title one',
    published: false,
    publish_date: null,
    slug: 'title-one' },
  { title: 'title two',
    published: false,
    publish_date: null,
    slug: 'title-two' },
  { title: 'title three',
    published: true,
    publish_date: null,
    slug: 'title-three' } ]

为什么grid.state().blogs在测试中仍然是一个空数组？

Answer 1

由于promise.gets是异步调用的，因此一旦模拟按钮单击，状态就不会更新。

我也在测试我的组件时也遇到了类似的问题，我想解决问题的一种方法是-从您的updateBlogTable中返回承诺并在测试中订阅then，并在该then中声明。

这样的东西-

updateBlogsTable() {
  let p = Axios.get("/api/blogs").then(response => {
      this.setState({ blogs: response.data.data });
  });
  return p;
}

grid.instance().updateBlogsTable().then(() => {
  expect(grid.state().blogs).toEqual(refreshResponse.data.data);
})

即使我也想知道是否可以通过模拟按钮单击来直接对其进行测试。

让我知道是否有帮助。