如何在 Gatsby 中对 GraphQL 查询进行单元测试

Posted 2023-03-08

【中文标题】如何在 Gatsby 中对 GraphQL 查询进行单元测试

【英文标题】：How to unit test GraphQL queries in Gatsby

【发布时间】：2019-01-15 05:22:23

【问题描述】：

我正在使用 Gatsby 和 Jest 进行测试。默认情况下，Gatsby 处理 GraphQL 数据获取，据我发现，它没有提供任何解决方案来在单元测试中测试其 GraphQL 查询。

有没有办法做到这一点？现在我只是在模拟查询以测试组件本身，但我希望能够在 GraphiQL 中不手动测试查询的工作。

我的代码如下所示：

PageContent.jsx

import PropTypes from 'prop-types';
import React from 'react';

const PageContent = ( data:  markdownRemark:  html   ) => (
  <div>
    html
  </div>
);

PageContent.propTypes = 
  data: PropTypes.shape(
    markdownRemark: PropTypes.shape(
      html: PropTypes.string.isRequired,
    ).isRequired,
  ).isRequired,
;

export const query = graphql`
  query PageContent($id: ID!) 
    markdownRemark(frontmatter:  id: $id ) 
      html
    
  
`;

export default PageContent;

PageContent.test.jsx

import PageContent from 'templates/PageContent';

describe("<PageContent>", () => 
  let mountedComponent;
  let props;

  const getComponent = () => 
    if (!mountedComponent) 
      mountedComponent = shallow(<PageContent ...props />);
    
    return mountedComponent;
  ;

  beforeEach(() => 
    mountedComponent = undefined;
    props = 
      data: 
        markdownRemark: 
          html: '<div>test</div>',
        ,
      ,
    ;
  );

  it("renders a <div> as the root element", () => 
    expect(getComponent().is('div')).toBeTruthy();
  );

  it("renders `props.data.markdownRemark.html`", () => 
    expect(getComponent().contains(props.data.markdownRemark.html)).toBeTruthy();
  );
);

【问题讨论】：

你找到方法了吗？

@VladyslavZavalykhatko 不，抱歉。我仍然只是在嘲笑查询

你想对 GraphQL 查询进行哪些测试？还是一样吗？

您可以对其进行快照测试，只需检查query 导出中的内容。

【参考方案1】：

我写了一个plugin that enables testing of Gatsby components with GraphQL queries。如果你安装它，你可以通过替换你的模拟数据来检索实际的 Graph QL 数据

  data: 
        markdownRemark: 
          html: '<div>test</div>',
        ,
      

与

  data: await getPageQueryData(`/path/to/your/page`)

然后它将从您最近一次构建项目时提取数据（使用gatsby build 或gatsby develop）

【讨论】：

如果你想测试你的原始查询数据（即确保 Markdown 符合标准或匹配文件结构），那么你可以创建一个“测试”页面来查询要测试的数据。然后，await getPageQueryData('/path/to/your/**test-**page')