Сборник рассказов Mock GraphQL (Gatsby) - PullRequest
Новая
       20

Сборник рассказов Mock GraphQL (Gatsby)

1 голос
/ 10 июля 2020

Я использую Гэтсби для создания блога. Gatsby может использовать Markdown с GraphQL для «автоматического» создания страниц сообщений для вас. Мне было интересно использовать здесь пример Gatsby .

В пользовательском интерфейсе сборника рассказов, как лучше всего «высмеять» запрос graphql и заменить его нашими данными уценки. Чтобы я мог протестировать этот компонент в пользовательском интерфейсе Storybook. Например, если у меня есть шаблон блога, который выглядит примерно так: 

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
      }
    }
  }
`;

Заранее спасибо

1 Ответ

1 голос
/ 12 июля 2020

Вероятно, вы можете изменить конфигурацию веб-пакета Storybook , чтобы использовать NormalModuleReplacementPlugin для имитации всего пакета gatsby. Затем экспортируйте метод graphql из вашего макета, которым вы можете манипулировать в своих историях.

В качестве альтернативы разделите свой компонент на чистый компонент и компонент, который выполняет запрос, и просто используйте чистый компонент, как предложено в https://www.gatsbyjs.org/docs/unit-testing/

...