Question

我正在使用Gatsby创建博客。 Gatsby可以将markdown与GraphQL结合使用，以“自动”为您创建帖子页面。我想知道使用Gatsby example here。

在故事书用户界面中，最好的方法是“模拟” graphql查询并将其替换为我们的markdown数据。这样我就可以在Storybook UI中测试此组件。例如，如果我有一个看起来像这样的博客模板：

import { graphql } from 'gatsby';
import React from 'react';

export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data; // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark;
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  );
}
export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`;

预先感谢

Answer 1

您可能可以修改the webpack configuration of Storybook以使用NormalModuleReplacementPlugin模拟整个select sum(CASE WHEN statusstorie = false and statusTwentyFive = true and category not in ('goals') and space = 'personal' THEN 1 ELSE 0 END) as "25%", sum(CASE WHEN statusstorie = false and statusFifty = true and category not in ('goals') and space = 'personal' THEN 1 ELSE 0 END) as "50%", sum(CASE WHEN statusstorie = false and statusSeventyFive = true and category not in ('goals') and space = 'personal' THEN 1 ELSE 0 END) as "75%", sum(CASE WHEN statusstorie = false and statusOneHundred = true and category not in ('goals') and space = 'personal' THEN 1 ELSE 0 END) as "100%" from goals软件包。然后从您的模拟中导出一个gatsby方法，您可以在故事中进行操作。

或者，将您的组件分为一个纯组件和一个执行查询的组件，然后按照https://www.gatsbyjs.org/docs/unit-testing/的建议使用纯组件

故事书模拟GraphQL（盖茨比）

1 个答案: