28、Gatsby开发：测试与调试全攻略

Gatsby开发：测试与调试全攻略

1. 编写Storybook故事

当配置文件就位后，就可以编写Storybook故事了。Storybook会自动查找所有带有 .stories.js 扩展名的文件，并将它们加载到界面中。对于Gatsby组件，这些故事可以与组件放在同一目录下；但对于Gatsby页面，由于Gatsby对 src/pages 目录中的JavaScript文件有限制，需要在 src 目录下创建一个 __stories__ 目录。

以下是一个Storybook故事的示例：

// src/components/bio.stories.js
import React from "react"
export default {
  title: "Bio",
}
export const bioStory = () => (
  <div style={
  
  { padding: "1rem", backgroundColor: "#ccc" }}>
    <h1 style={
  
  { color: "blue" }}>Hello world and Storybook!</h1>
  </div>
)

2. 使用Cypress进行端到端测试

视觉测试和单元测试可以对单个Gatsby组件和页面的质量变化进行小规模观察。但作为Gatsby开发