Gatsbyプロジェクトのテスト環境を構築したい
みねゆうじこのスクラップのゴール
- Gatsbyをモック化し、コンポーネントテストがパスすること
- Gatsbyをモック化し、StorybookにてUI管理が行えていること
みねゆうじ今回のGatsbyプロジェクトでは、GraphQLからデータ取得を行うコンポーネントが存在していたため、のUIテストを行うために、GraphQLをモックする必要がある。
Gatsby × Jestによる自動テストの導入
こちらで、Gatsbyをモックすることで、対応完了。
参考
みねゆうじGraphQLを内包したコンポーネントをStorybookに表示させることができない
今回対象のコンポーネントは、GraphQL（useStaticQuery）とGatsbyImageを持つコンポーネント。
対象のコンポーネントファイル
import React from 'react'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { useStaticQuery, graphql } from 'gatsby'
type Props = {
alt: string
fileName: string
onClick?: () => void
}
const getSrc = (name, query) => {
const img = query.allFile.nodes.find((node) => name.match(node.name))
return img.childImageSharp
}
const Image: React.FC<Props> = ({ onClick, ...props }) => {
const { alt, fileName } = props
const query = useStaticQuery(graphql`
{
allFile {
nodes {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
name
}
}
}
`)
return (
<button
onClick={onClick}
>
<GatsbyImage
image={getImage(getSrc(fileName, query))}
alt={alt}
objectFit='contain'
className={styles.image}
/>
</button>
)
}
export default Image
GraphQL部分をモックを目的に、mswを導入。
コンソールにて、[MSW] Mocking enabled.のメッセージが確認できたことから、モックサーバーの起動は問題なさそう。
storiesファイルにて、以下のコードを追加したが、以下のエラーが発生。
The result of this StaticQuery could not be fetched.
Uncaught Error: The result of this StaticQuery could not be fetched.
This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
storiesファイル
export const Default: Story = {
args: {
alt: 'かわいい猫の画像',
fileName: 'cat_is_cute'
},
parameters: {
msw: {
handlers: [
graphql.query('useStaticQuery', (_, res, ctx) => {
return res(ctx.data({
allFile: {
nodes: [{
childImageSharp: {
gatsbyImageData: {
images: {
fallback: {
src: `/src/images/cat_is_cute.png`,
srcSet: `/src/images/cat_is_cute.png 1x`,
},
},
},
layout: `constrained`,
width: 1,
height: 2,
},
}, ],
}
}))
}),
],
},
},
}
試しに、restリクエストを実行してみると、コンソールにリクエストされたログが表示されていたので、どうやらモック用のGraphQLリクエストに問題がありそう。
みねゆうじGatsbyのuseStaticQueryに問題がある？
調査を続けていると、以下のissueを発見。
これまでのmswのGraphQLモックリクエストに関する課題とは違う観点ではあるが、そもそもStorybook上でGatsbyのクエリはコケない？
詳しくみると、以下のコメントの通りいじってみると確かに、モック関係なくコンポーネントが動作した。
しかし、都度cp -rコマンドにてファイルコピーするのはちょっと本質的ではない。。
みねゆうじGatsbyをエイリアスによってモック差し替えすることで対応