配置contentful

　　1. 创建免费账号

　　2. 根据提示进行操作，

　　　　Content Model - 创建页面属性模板 (personalWebsite)

　　　　content entry  -  根据属性模板，添加内容，最后发布

　　　　API call - 发布后，可以使用Graph QL 或者 REST Api 获取内容

　　　　在Settings -> API Keys 中，添加新的API key. (系统默认会创建几个，所以可以直接使用或者自己创建.)

　　　　　　保存Space ID, Content Delivery API - access token, 如果有预览网页的话，可以保存下Content Preview API - access token

2. 创建react项目，这里我创建的是Nextjs项目

npx create-next-app@latest --typescript

　　Next中有关于GraphQL的模板，我没有使用: npx create-next-app next-with-apollo

　　使用Apollo Client插件来连接API

　npm install @apollo/client graphql

　　初始化Apollo - `apollo-client.js`

// apollo-client.ts

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
uri: `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/master?access_token=${process.env.CONTENTFUL_DELIVERY_API_KEY}`,
cache: new InMemoryCache(),
});

export default client;

　　Query 部分，点击Open GQL Playground会给你基本模板，然后添加自己需要的属性ID就可以

　　下面是我的主页代码， 调用GraphQL 来获取Contentful数据

　　　　// page/index.tsx

const Home: NextPage = (props:any) => {
const {contentfulData} = props

return (

export async function getStaticProps() {
const {data} = await client.query({
query: gql`
query contentfulData {
lasalleCollege(id: "5vl5HzuiPl2LaZfbvLDKya") {
lciCampuses,
title
}
}
`,
});

return {
props: {
contentfulData: data,
},
};
}

export default Home

Jest - Unit 测试

　　根据官方文档即可 https://nextjs.org/docs/testing#jest-and-react-testing-library

// package.json
"test": "jest",
“test-c": "jest --coverage"

4. Cypress - E2E 测试

　　同样根据官方文档即可https://docs.cypress.io/guides/getting-started/installing-cypress

//package.json
"cypress": "cypress run", // 命令行测试
"cypress-open": "cypress open", // 打开UI窗口进行测试

　　创建测试文件 cypress/e2e/spec.cy.ts

describe('Check Vercel Preview', () => {
it('Check Campus', () => {
cy.visit(`https://xxxxxxxxxxxxxxxxxxxxxxxx`)
// cy.visit(`http://localhost:3000`)
cy.get('#Montreal h1').should('have.length', 1)
cy.get('#Vancouver h1').should('have.length', 1)
})
})

5. Vercel 的关联

　　方法一(此方法只适用于部署，不适用于 测试+部署 )

　　方法二（通过Github的action来进行CICD）