如何在 Gatsby 中对 GraphQL 查询进行单元测试 [英] How to unit test GraphQL queries in Gatsby

问题描述

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

有没有办法做到这一点?现在我只是模拟查询来测试组件本身，但我希望能够测试查询的工作，而无需在 GraphiQL 中手动执行此操作.

这是我的代码的样子:

PageContent.jsx

从'prop-types'导入PropTypes；从反应"导入反应；const PageContent = ({ data: { markdownRemark: { html } } }) =>(<div>{html}

);PageContent.propTypes = {数据:PropTypes.shape({markdown备注:PropTypes.shape({html: PropTypes.string.isRequired,}).是必须的，}).是必须的，};导出 const 查询 = graphql`查询 PageContent($id: ID!) {markdownRemark(frontmatter: { id: $id }) {html}}`;导出默认页面内容；

PageContent.test.jsx

从'templates/PageContent'导入PageContent；描述(<页面内容>"，()=> {让mountedComponent;让道具；const getComponent = () =>{如果 (!mountedComponent) {安装组件 = 浅(<PageContent {...props}/>);}返回已安装的组件；};beforeEach(() => {安装组件 = 未定义；道具 = {数据: {降价备注:{html: '<div>test</div>',},},};});it("将 
 渲染为根元素", () => {期望(getComponent().is('div')).toBeTruthy();});it("渲染`props.data.markdownRemark.html`", () => {期望(getComponent().contains(props.data.markdownRemark.html)).toBeTruthy();});});

解决方案

我写了一个 允许使用 GraphQL 查询测试 Gatsby 组件的插件.如果你安装它，你可以通过替换你的模拟数据来检索实际的 Graph QL 数据

 数据:{降价备注:{html: '<div>test</div>',},}

与

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

然后它会从您构建项目的最新时间中提取数据(使用 gatsby build 或 gatsby develop)

I'm using Gatsby and Jest for testing. By default Gatsby handles the GraphQL data fetching, and from what I've found it doesn't provide any solution for testing its GraphQL queries in unit tests.

Is there a way to do this? Right now I'm just mocking the queries the test the component itself, but I want to be able to test queries work without manually doing so in GraphiQL.

Here's what my code looks like:

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();
  });
});

解决方案

I've written a plugin that enables testing of Gatsby components with GraphQL queries. If you install it you can retrieve the actual Graph QL data by replacing your mocked data

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

with

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

It will then pull the data from the latest time you built your project (using gatsby build or gatsby develop)

这篇关于如何在 Gatsby 中对 GraphQL 查询进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！