Jest + React 單元測試最佳實踐

来源:https://www.cnblogs.com/dtux/archive/2023/02/14/17119560.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 前言 單元測試是一種用於測試“單元”的軟體測試方法，其中“單元”的意思是指軟體中各個獨立的組件或模塊。開發者需要為他們的代碼編寫測試用例以確保這些代碼可以正常使用。 在 ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。

前言

單元測試是一種用於測試“單元”的軟體測試方法，其中“單元”的意思是指軟體中各個獨立的組件或模塊。開發者需要為他們的代碼編寫測試用例以確保這些代碼可以正常使用。

在我們的業務開發中，通常應用的是敏捷開發的模型。在此類模型中，單元測試在大部分情況下是為了確保代碼的正常運行以及防止在未來迭代的過程中出現問題。

測試目的

1、排除故障

每個應用的開發中，多少會出現一些意料之外的 bug。通過測試應用程式，可以幫助我們大大減少此類問題，並且增強應用程式的邏輯性。

2、保證團隊成員的邏輯統一

如果您是團隊的新成員，並且對應用程式還不熟悉，那麼一組測試就好像是有經驗的開發人員監視你編寫代碼，確保您處於代碼應該執行的正確路線之內。通過這些測試，您可以確信在添加新功能或更改現有代碼時不會破壞任何東西。

3、可以提高質量代碼

當您在編寫 React 組件時，由於考慮到測試，最好的方案將是創建獨立的、更可重用的組件。如果您開始為您的組件編寫測試，並且您註意到這些組件不容易測試，那麼您可能會重構您的組件，最終起到改進它們的效果。

4、起到很好的說明文檔作用

測試的另一個作用是，它可以為您的開發團隊生成良好的文檔。當某人對代碼庫還不熟悉時，他們可以查看測試以獲得指導，這可以提供關於組件應該如何工作的意圖的洞察，併為可能要測試的邊緣部分提供線索。

規範

工具

在袋鼠雲數棧團隊，我們建議使用 jest + @testing-library/react 來書寫測試用例。後者是為 DOM 和 UI 組件測試的軟體工具。

基礎語法

  • describe：一個將多個相關的測試組合在一起的塊

  • test：將運行測試的方法，別名是it

  • expect：斷言，判斷一個值是否滿足條件，你會使用到expect函數。 但你很少會單獨調用expect函數， 因為你通常會結合expect和匹配器函數來斷言某個值

  • skip：跳過指定的describe以及test，用法describe.skip/test.skip

  • cleanup：在每一個測試用例結束之後，確保所有的狀態能回歸到最初狀態，比如在 UI 組件測試中，我們建議在 afterEach 中調用 cleanup 函數

    import { cleanup } from '@testing-library/react';

describe('For test', () => {
  afterEach(cleanup);
  test('...', () => {})
})

註意事項

1、函數命名

關於是使用 test 還是使用 it 的爭論，我們不做限制。但是建議一個項目里，儘量保持風格一致，如果其餘測試用例中均為 test，則建議保持統一。

2、業務代碼

我們建議儘量把業務代碼的函數的功能單一化，簡單化。如果一個函數的功能包含了十幾個功能數十個功能，那我們建議對該函數進行拆分，從而更加有利於測試的進行。

3、代碼重構

在重構代碼之前，請確保該模塊的測試用例已經補全，否則重構代碼的風險會過於巨大，從而導致無法控制開發成本。

4、覆蓋率

我們建議儘量以覆蓋率 100% 為目標。當然，在具體的開發過程中會有各種各樣的情況，所以很少有能夠達到 100% 的情況出現。

5、修複問題

每當我們修複了一個 bug，我們應當評估是否有必要為這個 bug 添加一個測試用例。如果需要的話，則在測試用例中新增一條以確保後續的開發中不會復現該 bug。

評估的參考內容如下：

  • 是否會造成白屏或其他嚴重的問題
  • 是否會影響用戶的交互行為
  • 是否會影響內容的展示

以上內容，滿足一條或多條，則認為應當為該 bug 新增測試用例。

6、toBe or toEqual

這兩者的區別在於，toBe 是相等，即 ===，而 toEqual 是內容相同，即深度相等。我們建議基礎類型用 toBe，複雜類型用 toEqual。

我們需要測試什麼

包括但不限於以下幾種：

  • Component Data：組件靜態數據
  • Component Props：組件動態數據
  • User Interaction：用戶交互，例如單擊
  • LifeCycle Methods：生命周期邏輯
  • Store：組件狀態值
  • Route Params：路由參數
  • 輸出的dom
  • 外部調用的函數
  • 對子組件的改變

單元測試場景

1、快照測試

如果是一個純渲染的頁面或者組件，我們可以通過快照記錄最終效果，下一次快照結果會去對比是否正確。
使用場景：對於一個已知的固定的結果，我們使用快照去記錄結果，每次進行測試會將最新結果和記錄結果進行對比，如果一致，則代表測試通過，反之，則不然。

通常在測試 UI 組件時，我們會建議進行快照測試，以確保 UI 不會有意外的改變。這裡我們建議使用 react-test-renderer 進行快照測試。

yarn add react-test-renderer @types/react-test-renderer -D

安裝完成後，建議在 UI 測試的首個測試用例進行快照測試。

import React from 'react';
import renderer from 'react-test-renderer';
import { Toolbar } from '..';

test('Match Snapshot', () => {
  const component = renderer.create(<Toolbar data={toolbarData} />);
  const toolbar = component.toJSON();
  expect(toolbar).toMatchSnapshot();
});

2、dom 結構測試

使用場景：對於當前組件接收到的參數或者數據，會對應渲染出一個固定結構，我們對結構進行解析，看是否與預期相符。比如表格的行數應該與介面返回的 list 長度一致，表格的表頭應該固定是我們設定的文案，表格的對應某一格應該是介面返回的對應行和列的值。再比如組件內部根據接收的 props 的變數去判斷顯示 dom 結構，那我們在單測傳入某一個值時，我們的預期應該是顯示為什麼樣的。我們建議使用 @testing-library/jest-dom 做相關的測試

yarn add --dev @testing-library/jest-dom

測試例子如下：

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';

describe('Test Breadcrumb Component', () => {
  test('Should support to render custom title', async () => {
    const { container, getByTitle } = render(
       <MyComponent
         renderTitle={() => "I'm renderTitle";}
        />
     );

    const testDom = await waitFor(() =>
      container.querySelector('[title="test1"]')
    );
    const dom = await waitFor(() =>
      container.querySelector('[title="I\'m renderTitle"]')
    );

    expect(testDom).not.toBeInTheDocument();
    expect(dom).toBeInTheDocument();
  });
});

除了 toBeInTheDocument 外，還有其餘介面，參見官方文檔。

3、事件測試

使用場景：當組件或者頁面上有點擊事件，對於點擊後發生的一系列動作是我們需要檢測的，首先需要用 fireEvent 去模擬事件發生，然後測試事件是否正確觸發，比如我的表單操作按鈕，對於操作後的動作進行一一檢測對應。

const btns = btnBox.getElementsByClassName('ant-btn');
// 取消
fireEvent.click(btns[0]);
await waitFor(() => {
  expect(API.getProductListNew).toHaveBeenCalled();
});

4、function測試

function add(a, b){
  return a+b;
}
it('test add function', () => {
  expect(add(2,2)).toBe(4);
})

5、非同步測試

使用場景：當你的預期需要時間等待

  • waitFor：可能會多次運行回調，直到達到超時
await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1))
  • useFakeTimers：指定 Jest 使用假的全局日期、性能、時間和定時器 API，通常需要和runAllTicks、runAllTimers配合。
test('should warn if not saved custom type but clicked custom button', () => {
  const { getByText, baseElement } = wrapper;

  jest.useFakeTimers();
  fireEvent.click(getByText('自定義類型'));
  fireEvent.mouseDown(getByText('自定義類型'));

  expect(getByText('名稱不能為空')).toBeInTheDocument();
  jest.runAllTimers();

  const inputEle = baseElement.querySelector('.dt-input');
  fireEvent.change(inputEle, { target: { value: '1' } });
  jest.useFakeTimers();
  fireEvent.click(getByText('自定義類型'));

  expect(getByText('請先保存')).toBeInTheDocument();
  jest.runAllTimers();
});

6、模擬屬性和方法的返回結果

使用場景：當訪問的某些屬性或者方法在當前環境不存在時。

// 已有屬性：jest.spyOn，例子如下
jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockImplementation(() => 100);

// 未知屬性：Object.defineProperty，例子如下
Object.defineProperty(window, 'getComputedStyle', { value: jest.fn(() => ({ paddingLeft: '0px'})

// 方法的返回結果：jest.mock
function = jest.mock(() => {})

7、Drag

有時候，我們需要去測試拖拽功能，我們建議用以下函數來執行模擬拖拽的操作

import { fireEvent } from '@testing-library/react';

function dragToTargetNode(source: HTMLElement, target: HTMLElement) {
  fireEvent.dragStart(source);
  fireEvent.dragOver(target);
  fireEvent.drop(target);
  fireEvent.dragEnd(source);
}

8、test.only

在出現測試用例無法通過，但是又判斷代碼的邏輯沒有問題之後，將該條測試用例設置為 only 再跑一遍測試用例，以確保不是其他測試用例導致的該測試用例的失敗。這類問題經常出現自代碼中欠缺深拷貝，導致多條測試用例之中修改了原數據從而使得數據不匹配。

例如：

// mycode.ts
function add(record: Record<string, any>){
  Object.assign(record, { flag: false});
}

// mycode.test.ts
const mockData = {};
test('',() => {
  add(mockData)
  ...
  ...
})

test.only('',() => {
  add(mockData) // the mockData is modified by add function here
  ...
  ...
})

在項目中遇到的一些問題

1、執行 pnpm test 報錯

file

原因：當引入外部庫是es模塊時, jest無法處理導致報錯，可以通過 babel-jest 進行處理，根據官方文檔：https://jestjs.io/zh-Hans/docs/26.x/getting-started，還有一種就是修改jest.config.js 加入preset: 'ts-jest' ，會讓部分測試成功但是還是會存在一些問題。

方案一：採用了 babel-jest 進行處理

pnpm add -D babel-jest @babel/core @babel/preset-env

安裝完以後在工程的根目錄下創建一個babel.config.js

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

修改jest.config.js，增加transform

transform: {
  "^.+\\.js$": "babel-jest",
  "^.+\\.(ts|tsx)$": "ts-jest",
},

方案二：仍然採用 ts-jest ，把引起報錯文件的尾碼，如 js 改為 ts 即可

2、ts-jest和jest版本未對應

報如下錯誤

file

升級後版本（僅供參考）

file

3、toBeInTheDocument、toHaveClass等報錯

file

file

類型檢查錯誤，應該是@testing-library/jest-dom類型沒被引入導致的

有以下兩種方案，都需要修改tsconfig.json

// 方案一，刪除typeRoots
"typeRoots": ["node", "node_modules/@types", "./typings"]

// 方案二，添加types
"types": ["@testing-library/jest-dom"]

參考鏈接：https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany

4、Cannot find namespace 'NodeJS’

file

修改 tsconfig.json ，往 types 中加入 node

"types": ["node", "@testing-library/jest-dom"]

5、module 'tslib' cannot be found

報錯信息如下

file

原因是在 tsconfig.json 中開啟瞭如下配置

"importHelpers": true,

編譯文件會引入tslib可以參考

https://juejin.cn/post/6953554051879403534

https://github.com/microsoft/TypeScript/issues/37991

解決方案如下：
方案一：

"importHelpers": false,

方案二：

pnpm add tslib

並且修改 tsconfig

"paths": {
  "tslib" : ["./node_modules/tslib/tslib.d.ts"] //在paths下添加tslib路徑
}

6、由於單測的運行環境問題，當遇到某些方法沒有的時候嘗試mock下

例如：

file

解決方案如下：

(global as any).document.createRange = () => ({
  selectNodeContents: jest.fn(),
  getBoundingClientRect: jest.fn(() => ({
    width: 500,
  })),
});

7、多個單測文件缺失某一個方法，可以採用如下配置

例如:多個單測文件有如下報錯：

file

那麼首先在 jest.comfig.js 中添加配置

module.exports = {
  setupFilesAfterEnv: ['./setupTests.ts'],
  // ...
}

然後在 setupTests.ts 文件中：

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

8、The error below may be caused by using the wrong test environment；Consider using the "jsdom" test environment

依賴版本：

"ts-jest": "^28.0.8",
"jest": "^28.1.2",

解決方法： 在 jest.config.js 中添加配置

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  // ...
}

並安裝 jest-environment-jsdom (註意： 僅 jest 28 及更高版本需要安裝此依賴項)

{
  "devDependencies": {
    "jest-environment-jsdom": "^28.1.2",
  }
}

9、Echarts 單元測試 canvas 報錯

在寫 Echarts 單元測試的時候，會有 canvas 報錯。原因很明顯，Echarts 依賴了 canvas。

解決辦法：使用 jest-canvas-mock，參考：Error: Not implemented: HTMLCanvasElement.prototype.getContext

註意：直接引入 canvas 雖然可以解決單元測試的報錯，但是會導致安裝依賴會有偶發性 canvas 報錯。

file

10、引入了第三方的組件CodeMirrorEditor寫單測報錯

在對該組件進行單測時，由於引入了第三方的組件 CodeMirrorEditor ，編譯時出現了以下問題，原因是試圖導入 jest 無法解析的文件，而從實際上來說我們對當前組件的測試其實並不用去編譯 dt-react-codemirror-editor。

file

file

因此，在 jest.config.js 文件加入編譯時需要忽略的文件。

file

再次運行測試，然而。。。。。。

file

好吧，又失敗了進入 index 查看，提示找不到 style 文件但是文件夾里又是存在的，初步嘗試是否由於文件擴展名起,保存測試通過，但是修改 node_modules 里的文件擴展名無法從根本解決該問題，按照推薦提示在測試覆蓋文件擴展名 moduleFileExtensions 內加入 css。

file

再次嘗試，然而。。。。。。jest 去編譯了 style.css 文件，然後它無法解析失敗了，查看配置。

file

發現已經配置了當匹配到 css 文件時映射到一個空對象里，並不會去編譯原樣式文件，原因是由於加入到了編譯覆蓋的文件擴展名數組裡 moduleFileExtensions，因此無法採用推薦方法。

file

再次回顧問題產生的原因，jest 無法找到 style 文件但是找到了 style.css 文件，但是 style 文件我們並不需要進行編譯，加入 moduleNameMapper 當找到 style 文件時映射到一個空對象的文件里。

file

11、Route && Link

在測試麵包屑組件BreadCrumb時，因為麵包屑組件中只用了 Link 標簽，最終會被轉成 a 標簽，用來路由導航。如下寫法是將 Link 和 route 放在一個組件之中。然後報錯：Invariant Violation: <Link>s rendered outside of a router context cannot navigate。

import React from 'react'
import BreadCrumb from '../index';
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect';
import { Router, Switch, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history'
const testProps = {
  breadcrumbNameMap: [
    {
       name: 'home',
       path: '/home'
    },
    {
       name: 'home/about',
       path: '/home/about'
    }
  ],
  style: {
    backgroundColor: '#dedede'
  }
}
const Home = () => <h1>home</h1>
const About = () => <h1>about</h1>
const App = () => {
  const history = createMemoryHistory();
  return (
     <>
       <Router history={history}>
         {< BreadCrumb {...testProps} />}
          <Switch>
             <Route exact path="/main" component={Home} />
             <Route path="/main/home" component={About} />
          </Switch>
        </Router>
      </>
    )
}
describe('test breadcrumb', () => {
  test('should navigate to home when click ', () => {
    const { container, getByTestId } = render(<App />);
    expect(container.innerHTML).toMatch('about')
    fireEvent.click(getByTestId('/home-link'))
      expect(container.innerHTML).toMatch('home')
  })
})

主要原因是版本原因：3.0版本路由不支持這種寫法。3.0是將react-router 和react-router-dom分開的；而4.0路由將其合併成了一個包，在具體使用時應該基於不同的平臺要使用不同的綁定庫。例如在瀏覽器中使用 react router，就安裝 react-router-dom 庫；在 React Native 中使用 React router 就應該安裝 react-router-native 庫，但是我們不會安裝 react-router了。項目中用的是3.0版本路由，於是改為3.0寫法，將link和router分開寫在兩個組件中，通過測試

const testProps = {
  breadcrumbNameMap: [
    {
      name: 'home',
      path: '/home'
    },
    {
      name: 'about',
      path: '/about'
    }
  ],
  style: {
    backgroundColor: '#dedede'
  }
}
const App = (props) => {
  return (
    <div>
      {<BreadCrumb {...testProps} />}
      {props.children}
    </div>
  )
}
const About = () => <h1>about page</h1>
const Home = () => <h1>home</h1>

describe('test breadcrumb', () => {
  afterEach(() => {
    cleanup();
  })
  test('should navigate to home router when click ', () => {
    const history = createMemoryHistory()
    const { container, getByTestId } = render(
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={About} />
        <Route path="/about" component={About} />
        <Route path="/home" component={Home} />
      </Route>
    </Router>
  );
    expect(container.innerHTML).toMatch('about')
    fireEvent.click(getByTestId('/home-link'))
    expect(container.innerHTML).toMatch('home')
  })
})

參考文獻


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • GaussDB(DWS)性能調優：indexscan導致的性能問題識別與優化
    摘要：通常跑批加工場景下，都是大數量做關聯操作，通常不建議使用索引。有些時候因為計劃誤判導致使用索引的可能會導致嚴重的性能問題。本文從一個典型的索引導致性能的場景重發，剖析此類問題的特征，定位方法和解決方法 本文分享自華為雲社區《GaussDB(DWS)性能調優：indexscan導致的性能問題識別 ...
  • Redis避坑指南：為什麼要有分散式鎖？
    JUC提供的鎖機制，可以保證在同一個JVM進程中同一時刻只有一個線程執行操作邏輯； 多服務多節點的情況下，就意味著有多個JVM進程，要做到這樣，就需要有一個中間人； 分散式鎖就是用來保證在同一時刻，僅有一個JVM進程中的一個線程在執行操作邏輯； 換句話說，JUC的鎖和分散式鎖都是一種保護系統資... ...
  • ClickHouse 查詢優化詳細介紹
    你想要的 ClickHouse 優化，都在這裡。 ClickHouse 是 OLAP（Online analytical processing）資料庫，以速度見長[1]。ClickHouse 為什麼能這麼快？有兩點原因[2]： 架構優越 列式存儲 索引 數據壓縮 向量化執行 資源利用 關註底層細節... ...
  • mysql 日誌種類
    mysql日誌種類 錯誤日誌 二進位日誌 查詢日誌 慢查詢日誌 日誌 錯誤日誌 錯誤日誌是mysql中最重要的日誌之一，它記錄了當mysqld啟動和停止時，以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息，當資料庫出現任何故障導致無法正常使用時，建議首先查看此日誌。 該日誌是預設開啟的，預設存放目 ...
  • 函數式編程：Flutter&Dart中的組合
    本文翻譯自: Composition in Flutter & Dart 在 Flutter & Dart 中使用組合創建模塊化應用程式。 什麼是組合？ 在dictionary.com 中 composition 的定義為：將部分或者元素組合成一個整體的行為。簡單說，組合就像堆樂高積木，我們可以將積 ...
  • 記錄--前端實現登錄拼圖驗證
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 不知各位朋友現在在web端進行登錄的時候有沒有註意一個變化，以前登錄的時候是直接賬號密碼通過就可以直接登錄，再後來圖形驗證碼，數字結果運算驗證，到現在的拼圖驗證。這一系列的轉變都是為了防止機器操作，但對於我們來說，有億點麻煩，但也沒 ...
  • 字元串的解讀和標簽模板
    字元串解讀 es6加強了對Unicode 的支持，允許\uxxxx的形式展現一個字元，例如： console.log('\u0061'); // 列印 a \u後面的為字元的 Unicode 碼點 \u 後面4位 xxxx 但是這種寫法只識別 \u0000 到 \UFFFF 之間的字元，超出需要使用 ...
  • 雲小課｜使用SpringBoot快速構建FunctionGraph HTTP函數
    閱識風雲是華為雲信息大咖，擅長將複雜信息多元化呈現，其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要：本篇雲小課主要指導使用Springboot應用的用戶，快速部署業務到函數工作流FunctionGraph服務。 本文分 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類