Enzyme 测试 React 组件在使用 GraphQL 时的问题及解决方法。

阅读时长 4 分钟读完

Enzyme 是 React 的一个测试工具,经常被用于组件测试。在使用 GraphQL 时,可能会出现一些问题,本文将介绍这些问题以及如何解决它们。

问题1:测试中的 GraphQL 查询不被正确解析

当测试组件时,通常需要模拟数据。如果使用 GraphQL,需要使用一个模拟查询或者模拟数据。但是,Enzyme 没有提供这样的功能,所以需要自己解析 GraphQL 查询。但是,对于复杂的查询,可能会出现解析错误。

解决方法:

可以使用 graphql-tools 或者 apollo-server-testing 等工具来解析 GraphQL 查询,并将结果传递给组件。例如,可以使用 graphql-tools 的 mockSchema 函数来生成一个模拟的 GraphQL schema。示例代码如下:

-- -------------------- ---- -------
------ - ---------- - ---- ----------------

----- ------ - ------------
  ------ -- -- --
    ------ - - --- -- ------ ------- -- - --- -- ------ ------- - -
  --
---

-- ------ ------

问题2:异步的 GraphQL 查询导致测试失败

GraphQL 的查询是异步的,如果你的组件依赖于一个异步查询的结果,可能会导致测试失败。例如,你的组件需要一个通过 GraphQL 查询获取的列表,但是测试中的组件创建时还没有获取到数据。

解决方法:

可以使用 mount 函数代替 shallow 函数来挂载组件,并等待查询结果。示例代码如下:

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ - ---------------- - ---- -------------------------
------ - -------------- - ---- -----------------

------ ----------- ---- ----------------
------ - --------- - ---- ------------

----------------------- -- -- -
  ---------- ------ ---- -- ------- ----- -- -- -
    ----- ---------- - -------------------

    -----------------------------
      ----------
      -- -- ----------------- ----- - ------ - - --- -- ------ ------- -- - --- -- ------ ------- - - - --
    --

    ----- ------- - ------
      --------------- --------------------
        ------------ --
      -----------------
    --

    -- ------
    ----- --- --------------- -- ------------------- ----

    -------------------------------------------
  ---
---

在这个示例中,createMockClient 用于创建一个模拟的 Apollo 客户端,并使用 setRequestHandler 方法模拟 GET_TODOS 查询的返回结果。然后,将组件挂载到 ApolloProvider 中,并等待查询结果后进行测试。

结论:

使用 Enzyme 测试时,如果涉及到 GraphQL 查询,则需要特别注意。以上是两个常见的与 GraphQL 相关的问题以及解决方法,能够帮助开发者更好地理解和测试涉及到 GraphQL 的 React 组件。同时,需要提醒的是,GraphQL 查询的异步性质必须谨慎对待,测试时也需要特别注意异步操作的处理以及等待。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6731e06a0bc820c5823af183

纠错
反馈