Jest test React

使用Jest進行react測試

install

npm install --save-dev jest

在package.json文件中添加

{
  "scripts": {
    "test": "jest"
  }
}
複製代碼

以後就可使用npm run test跑測試了

若是須要babel的話，還須要安裝babel並進行配置

安裝babel相關依賴： npm i -D babel-jest @babel-core @babel/preset-env

並建立.babelrc文件,因爲須要使用react，因此也添加了react須要的相關配置

{
    "presets": [
        "@babel/env",
        "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime"
    ]
}
複製代碼

匹配器

跟其餘的不少測試框架同樣，jest也有不少匹配器供咱們去使用，匹配器那麼多hhhh。。。看上去就是它自己要表達的意思。

toBe test exact equality

toEqual recursively checks every field of an object or array. 遞歸檢查判斷

toBeCloseTo 用來比較小數,避免浮點數偏差(0.1 + 0.2).toBeCloseTo(0.3)

toBeNull

toBeUndefined

toBeDefined

toBeTruthy

toBeFalsy （There are only six falsey values in JavaScript: undefined, null, NaN, 0, "" , and false .）

toBeGreaterThan

toBeGreaterThanOrEqual

toBeLessThan

toBeLessThanOrEqual

toMatch 正則匹配。

toContain 判斷數組中是否包含指定項。

.toHaveProperty(keyPath, value) 判斷對象中是否包含指定屬性。

toThrow 判斷是否拋出指定的異常。

toBeInstanceOf 判斷對象是不是某個類的實例，底層使用 instanceof。

全部的方法均可以使用.not取反 好比 (0.1 + 0.2).not.toBeCloseTo(0.4)

異步測試

異步測試的方法也不少

關於異步測試，官網說的比較清楚，這裏就說一些須要注意的點吧

• Promse —— resolves && rejects

  Jest will wait for that promise to resolve .
  
   If the promise is rejected, the test will automatically fail.
  
  If you expect a promise to be rejected use the .catch method
  複製代碼

  在使用resolves或者rejects對Promise進行測試的時候，須要把整個斷言做爲返回值返回,若是忘了return，在 fun函數返回的這個 promise 變爲 resolved 狀態、也就是then() 執行以前，測試就已經被視爲完成了。

  test('when it resolved', () => {
    return expect(fun()).resolves.toBe('...');
  });
  複製代碼

• done()

  若是使用回調函數處理異步，好比fun函數再處理完成時須要調用callback(),若是直接在測試中寫以下代碼，可是Jest測試在執行結束後纔會完成，那麼這個測試時時不會工做的。

  這個時候使用單個參數調用 done，而不是將測試放在一個空參數的函數。 Jest會等done回調函數執行結束後，結束測試。

  test('...', done => {
    function callback(data) {
      expect(data).toBe('...');
      done();
    }
  
    fun(callback);
  });
  複製代碼

• async && await

  能夠把resolves/rejects 和 async/await配合使用

  test('success', async () => {
    await expect(fun()).resolves.toBe('...');
  });
  
  test('error', async () => {
    await expect(fun()).rejects.toThrow('error');
  });
  複製代碼

react component test

須要測試react的時候，須要安裝npm i -dev react-test-renderer去render snapshot

render一個組件以後，生成的snapshot就是對這個組件的節點的渲染結果，在使用npm run test以後會生成名爲__snapshots__的文件夾,其中的文件格式爲component.test.js.snap，snapshot文件也須要提交到代碼庫中。

在下一次運行測試的時候，新渲染的結果會和以前的snapshot進行比較，若是不一樣則測試失敗，若是變更符合預期，想要更新snapshot，能夠經過npm run test:update來操做。

測試節點

某些狀況下，咱們須要測試某一個component中的一個節點有沒有被渲染或者節點的內容是否符合預期

• 使用testing library

在測試節點的時候，咱們能夠搭配使用一些testing library,固然使用以前也須要安裝——npm i --dev @testing-library/react

• mock相關依賴和組件

  • mock module

    在測試節點以前，若是當前組件中引用了其餘的模塊，須要先mock組件依賴的模塊jest.mock('../fileName');

  • mock component

    若是須要測試的組件中還包括其餘組件，爲了保證不受其餘組件的影響，這個時候咱們也須要mock組件引入的其他組件，

    好比在Header組件中引用了Context組件，那麼就須要mock Context組件，好比Context中爲一個div，咱們能夠直接將Context mock爲一個div，其中的內容並不重要

    jest.mock('../Context', () => {
      const MockContext = () => <div>Some Context</div>;
      return MockContext;
    });
    複製代碼

• 測試組件節點渲染

  在mock完相關的依賴以後，就能夠對自身組件進行測試了

  例如在Header中，咱們須要測試是否渲染了一個Button

  //Header.js
  <Button data-testid="button">
      Button Context        
  </Button>
  複製代碼

  //Header.test.js
  import {render} from '@testing-library/react';
  
  renderHeader = render(<Header />); it('should show button', () => { expect(renderHeader.getByTestId('button')).toBeInTheDocument(); }); 複製代碼

  在這個測試中render(<Header />)是使用testing library的render方法渲染出Header組件

  renderHeader.getByTestId('button')是testing library中的query方法，更多的query方法能夠看這裏

  可是，若是Header中並無這個button的話，使用getByTestId會報錯，這是由於在 testing library中的query方法中，全部的getBy方法都返回找到的第一個節點，並在沒有匹配到或者匹配到多個時拋出error，這個時候就須要使用queryBy方法，即queryByTestId

  queryBy方法返回找到的第一個節點並在沒有找到時返回null。

• 測試組件event

  例如咱們要測試點擊Header組件中的button以後須要發生的事情，這個時候就須要模擬點擊事件

  fireEvent.click(renderHeader.getByTestId('button'));

更多的事件跳這裏