Add jest

* remove cypress

__mocks__/fileMock.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/no-anonymous-default-export */
+export default 'test-file-stub';

__mocks__/styleMock.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/no-anonymous-default-export */
+export default {};

__tests__/index.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Index from 'pages/index';
+
+const postData = {
+  totalNum: 10,
+  pagingSize: 10,
+  allPages: 10,
+  postDatas: [
+    {
+      id: 'test',
+      desc: 'test',
+      title: 'test',
+      date: '2021-12-15T13:27:35.555Z',
+      tags: 'test',
+      categories: 'test',
+      url: 'test',
+      index_img: 'test',
+    },
+  ],
+};
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<Index {...postData} />);
+
+    const heading = screen.getAllByRole('article', {
+      name: /Hi, there 👋/i,
+    });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

__tests__/pages/about.test.tsx

@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import About from 'pages/about';
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<About />);
+
+    const heading = screen.getByRole('heading', {
+      name: /Hi, there 👋/i,
+    });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

cypress.json

@@ -1,4 +0,0 @@
-{
-  "viewportWidth": 1920,
-  "viewportHeight": 1080
-}

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/integration/article.spec.ts

@@ -1,52 +0,0 @@
-/* eslint-disable */
-describe('Article', () => {
-  it('open url', () => {
-    cy.visit('http://localhost:3000/');
-  });
-  it('check article', () => {
-    cy.get('main > article:first').find('a').should('have.attr', 'href');
-    cy.get('main > article')
-      .find('a')
-      .invoke('attr', 'href')
-      .should('contain', '/posts/');
-    cy.get('main > article')
-      .find('a')
-      .invoke('attr', 'href')
-      .should('contain', '/posts/')
-      .then((href) => {
-        cy.request(href).its('status').should('eq', 200);
-      });
-  });
-  it('into article', () => {
-    // Click title
-    cy.get('main > article:first h2').parent().click();
-    cy.url().should('contain', '/posts/');
-
-    cy.get('article')
-      .should('be.visible')
-      .find('header')
-      .should('be.visible')
-      .find('h1')
-      .should('be.visible');
-
-    cy.get('section').should('be.visible').find('h2').should('be.visible');
-  });
-  it('check back button', () => {
-    cy.get('#__next > div > button')
-      .should('be.visible')
-      .should('contain.text', 'BACK');
-  });
-  it('comment and footer', () => {
-    cy.get('.giscus').should('be.visible');
-    cy.get('footer').contains('Powered by Next.js ❤️');
-  });
-  it('table of content', () => {
-    cy.get('#table-of-contents')
-      .should('be.visible')
-      .contains('Table of contents')
-      .next()
-      .should('be.visible')
-      .find('li')
-      .should('be.visible');
-  });
-});

cypress/integration/home.spec.ts

@@ -1,34 +0,0 @@
-/* eslint-disable */
-describe('Home', () => {
-  it('open url', () => {
-    cy.visit('http://localhost:3000/');
-  });
-  it('should have navs', () => {
-    cy.get('header').should('be.visible');
-    cy.get('nav').should('be.visible').find('a').should('have.length', 3);
-
-    cy.get('img[alt="Avatar"]').should('be.visible');
-
-    cy.get('a[href*="/"]').contains('首页');
-    cy.get('a[href*="/archive"]').contains('归档');
-    cy.get('a[href*="/about"]').contains('关于');
-  });
-  it('should have article', () => {
-    cy.get('main')
-      .should('be.visible')
-      .find('article')
-      .should('have.length', 10);
-  });
-  it('check back to top button', () => {
-    cy.get('.ant-back-top').should('be.hidden');
-    cy.get('#__next > div:first').scrollTo(0, 9000);
-    cy.get('.ant-back-top').should('be.visible');
-    cy.get('#__next > div:first').scrollTo(0, 0);
-    cy.get('.ant-back-top').should('be.hidden');
-    cy.get('#__next > div:first').scrollTo(0, 9000);
-    cy.get('.ant-back-top').should('be.visible').click();
-  });
-  it('should have footer', () => {
-    cy.get('footer').contains('Powered by Next.js ❤️');
-  });
-});

cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

cypress/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
-  },
-  "include": ["**/*.ts"]
-}

jest.config.ts

@@ -0,0 +1,36 @@
+const config = {
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+  ],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.ts`,
+
+    // Handle module aliases
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  moduleDirectories: ['node_modules', '<rootDir>'],
+};
+export default config;

jest.setup.ts

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -9,10 +9,8 @@
     "build:export": "next build && next export",
     "postbuild": "node ./scripts/build-search.mjs",
     "lint": "next lint",
-    "cypress": "cypress open",
+    "test": "jest --watch",
-    "cypress:headless": "cypress run",
+    "test:coverage": "CI=true yarn test --env=jsdom --coverage"
-    "e2e": "start-server-and-test start http://localhost:3000 cypress",
-    "e2e:headless": "start-server-and-test start http://localhost:3000 cypress:headless"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
@@ -52,13 +50,18 @@
     "unified": "^10.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
     "@types/react": "17.0.31",
     "@types/react-instantsearch-dom": "^6.12.0",
     "@types/react-redux": "^7.1.20",
     "eslint": "7.32.0",
     "eslint-config-next": "11.1.2",
     "eslint-config-prettier": "^8.3.0",
-    "start-server-and-test": "^1.14.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.5",
+    "react-test-renderer": "^17.0.2",
+    "ts-node": "^10.4.0",
     "typescript": "4.4.4"
   }
 }