如何在 Gatsby 中對 GraphQL 查詢進行單元測試

Question

我正在使用 Gatsby 和 Jest 進行測試。 默認情況下，Gatsby 處理 GraphQL 數據獲取，據我所知，它沒有提供任何解決方案來在單元測試中測試其 GraphQL 查詢。

有沒有辦法做到這一點？ 現在我只是模擬查詢來測試組件本身，但我希望能夠測試查詢工作而無需在 GraphiQL 中手動執行此操作。

這是我的代碼的樣子：

頁面內容.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();
  });
});

Answer 1

我編寫了一個插件，可以使用 GraphQL 查詢測試 Gatsby 組件。 如果你安裝它，你可以通過替換你的模擬數據來檢索實際的 Graph QL 數據

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

和

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

然后它將從您構建項目的最新時間中提取數據（使用gatsby build或gatsby develop ）