微前端 - qiankun 入门到实践——第十一节：微前端架构的测试与部署在微前端架构中，测试与部署是确保系统稳定性和可

在微前端架构中，测试与部署是确保系统稳定性和可靠性的重要环节。我们需要针对主应用和子应用分别进行测试，并采用合适的部署策略，以实现高效的开发和运维。

测试

测试包括单元测试、集成测试和端到端测试（E2E）。我们将分别介绍这些测试类型及其在微前端架构中的应用。

单元测试

单元测试用于测试最小的代码单元，确保每个函数或组件能够独立工作。

在主应用和子应用中配置Jest和React Testing Library进行单元测试：
安装依赖：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @types/jest

配置jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

创建setupTests.ts：

import '@testing-library/jest-dom';

编写一个简单的单元测试：

// src/components/MyComponent.test.tsx import React from 'react'; import { render } from '@testing-library/react'; import MyComponent from './MyComponent';

test('renders component correctly', () => { const { getByText } = render(); expect(getByText('This is a component')).toBeInTheDocument(); });
集成测试

集成测试用于测试多个模块或组件之间的交互，确保它们能够协同工作。

使用React Testing Library编写集成测试：

// src/App.test.tsx import React from 'react'; import { render } from '@testing-library/react'; import App from './App';

test('renders app correctly', () => { const { getByText } = render(); expect(getByText('Home')).toBeInTheDocument(); expect(getByText('About')).toBeInTheDocument(); });
端到端测试（E2E）

E2E测试用于模拟用户行为，测试整个应用的工作流程。

使用Cypress进行端到端测试：
安装Cypress：

npm install --save-dev cypress
配置cypress.json：

{"baseUrl": "http://localhost:3000"}
编写一个简单的E2E测试：

// cypress/integration/app.spec.js describe('App', () => { it('should display home page', () => { cy.visit('/'); cy.contains('Home'); });

it('should navigate to about page', () => { cy.visit('/'); cy.contains('About').click(); cy.url().should('include', '/about'); cy.contains('About Page'); }); });

部署

部署微前端架构的应用涉及到主应用和子应用的独立部署，以及通过配置将它们集成在一起。

使用Docker进行容器化部署

Docker可以将应用打包成镜像，确保在任何环境中都能一致运行。

为主应用创建Dockerfile：

主应用的Dockerfile

FROM node:14-alpine as build

WORKDIR /app COPY . . RUN npm install RUN npm run build

FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

为子应用创建Dockerfile：

子应用的Dockerfile

FROM node:14-alpine as build

WORKDIR /app COPY . . RUN npm install RUN npm run build

FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
构建和运行Docker镜像：

子应用的Dockerfile

FROM node:14-alpine as build

WORKDIR /app COPY . . RUN npm install RUN npm run build

FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

使用CI/CD进行持续集成和部署

使用CI/CD工具（如GitHub Actions、GitLab CI、Jenkins等）实现自动化构建、测试和部署。

配置GitHub Actions：

在.github/workflows目录下创建ci.yml文件：

name: CI

on: [push]

jobs: build: runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '14'
- run: npm install
- run: npm run build
- run: npm test

deploy: needs: build runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Deploy to Docker Hub
  run: |
    echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
    docker build -t main-app .
    docker tag main-app $DOCKER_USERNAME/main-app
    docker push $DOCKER_USERNAME/main-app
  env:
    DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
    DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

配置Nginx反向代理

使用Nginx反向代理将主应用和子应用整合在一起，提供统一的访问入口。

Nginx配置示例：

server { listen 80;

location / { proxy_pass http://main-app:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP$ remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto$ scheme; }

location /subapp1/ { proxy_pass http://sub-app-1:7100; proxy_set_header Host $host; proxy_set_header X-Real-IP$ remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto$ scheme; } }

示例代码

以下是一个完整的示例，包括测试和部署配置。

主应用

// src/App.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders app correctly', () => {
  const { getByText } = render(<App />);
  expect(getByText('Home')).toBeInTheDocument();
  expect(getByText('About')).toBeInTheDocument();
});

子应用

// src/main.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders sub app correctly', () => {
  const { getByText } = render(<App />);
  expect(getByText('Sub Application')).toBeInTheDocument();
});

GitHub Actions CI配置

# .github/workflows/ci.yml
name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npm run build
    - run: npm test

  deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Deploy to Docker Hub
      run: |
        echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
        docker build -t main-app .
        docker tag main-app $DOCKER_USERNAME/main-app
        docker push $DOCKER_USERNAME/main-app
      env:
        DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
        DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

通过本节内容，我们了解了如何在微前端架构中进行测试与部署。我们探讨了单元测试、集成测试、端到端测试，以及使用Docker和CI/CD工具进行容器化部署和自动化部署的方法。接下来，我们将总结整个课程的内容，并展望微前端架构的未来发展。

微前端 - qiankun 入门到实践——第十一节：微前端架构的测试与部署

测试

部署

主应用的Dockerfile

子应用的Dockerfile

子应用的Dockerfile

示例代码