React 組件測試 | 開發人員指南 | Nightwatch.js 測試框架

概觀

在 Nightwatch 中進行 React 組件測試可以使用我們的官方 @nightwatch/react 外掛程式，它建立在 vite-plugin-nightwatch 外掛程式之上。React 外掛程式會在內部管理自己的 Vite 開發伺服器，因此無論是否使用 Vite，都可以在任何專案中使用。

安裝

步驟 1。

可以從 NPM 安裝 @nightwatch/react 外掛程式，指令如下：

npm install @nightwatch/react

步驟 2。

然後更新您的 Nightwatch 組態，並將外掛程式新增至清單中

nightwatch.conf.js

module.exports = {
  plugins: ['@nightwatch/react']
}

步驟 3。

a. 非 Vite 專案

@nightwatch/react 外掛程式會在內部管理自己的 Vite 開發伺服器，因此如果您的專案中還未使用 Vite，則您已完成 (目前)。

b. 已使用 Vite

如果您已經有 Vite 專案，則 @nightwatch/react 外掛程式會嘗試使用現有的 vite.config.js 或 vite.config.ts (如果找到其中一個)。您也可以透過外掛程式選項 (請參閱下方) 提供不同的 Vite 設定檔。

更新 vite.config.js 並新增 vite-plugin-nightwatch 外掛程式

vite.config.js

import nightwatchPlugin from 'vite-plugin-nightwatch'


export default {
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin()
  ]
})

撰寫測試

使用 JSX + 組件故事格式

從 2.4 版開始，Nightwatch 支援使用 JSX 執行 React 組件測試，並以組件故事格式 (CSF) 子集撰寫。CSF 是由 Storybook 引入的基於 ES6 模組的開放標準。

檔案名稱必須使用 .jsx 或 .tsx 作為副檔名。在最簡單的形式中，組件測試如下所示

test/sampleTest.jsx

import Form from '../components/Form.jsx';


export default {
  title: 'Form',
  component: Form,
}


export const FormStory = () => <Form />

在組件測試術語中，「故事」是以屬性或引數表示特定組件。在我們的具體案例中，它是單一的 export const 宣告。

閱讀更多關於以組件故事格式撰寫測試的資訊

不使用 JSX

此外掛程式僅提供 mountComponent 指令，可用於隔離掛載組件，並且可以選擇使用一組指定的屬性。

.mountComponent(`componentPath`, `[props]`, `[callback]`)

參數

名稱	類型	componentPath
`componentPath`	`string`	要掛載的組件檔案 (`.jsx`) 位置
`props` 選用	`object` \| `function`	要傳遞至 React 組件的屬性；這可以是將序列化為 JSON 的物件，或傳回屬性物件的函式。該函式將在瀏覽器的環境中執行。
`callback` 選用	`function`	一個選用的回呼函式，它將使用組件元素來呼叫。

組態設定

我們設計 @nightwatch/react 外掛程式，使其使用合理的預設組態設定，但在某些更進階的案例中，您可能需要變更某些組態選項。

Vite 開發伺服器

預設情況下，Nightwatch 將嘗試自動啟動 Vite 開發伺服器。您可以透過在 nightwatch.conf.js 檔案的 vite_dev_server 字典中新增以下內容來停用此功能。

這與其他基於 Vite 的組件測試外掛程式 (例如 @nightwatch/vue 外掛程式) 相同。

nightwatch.conf.js

module.exports = {
  plugins: ['@nightwatch/react'],
  vite_dev_server: {
    start_vite: true,
    port: 5173
  }
}

外掛程式選項

此外掛程式接受一些組態選項，這些選項可以在專案中使用現有的 vite.config.js 檔案時設定。

- `renderPage`

指定要使用的自訂測試轉譯器的路徑。套件中包含預設轉譯器，但此選項可以覆寫該值。

vite.config.js

export default {
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin({
      renderPage: './src/test_renderer.html'
    })
  ]
}

範例

const component = await browser.mountReactComponent('../../../src/components/Form.jsx')

test/sampleTest.js

describe('user info test', function() {
  let component;
  

  before(async () => {
    component = await browser.mountComponent('../../../src/components/UserInfo.jsx', function() {
      return {
        date: new Date(),
        text: 'I hope you enjoy reading Ulysses!',
        author: {
          name: 'Leopold Bloom',
          avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Poldy.png'
        }
      }
    });
  });
  

  it('should render the component without error', function() {
    browser.expect(component).to.be.visible;
  })
})