使用Mocha / Chai / Sinon測試document.createElement（'a'）

Question

我正在嘗試測試以下功能

export const checkForDuplicateUrl = (containers, url) => {
  let a = document.createElement('a')
  a.href = url
  const urlHostName = a.hostname

  return containers.find((container) => {
    let b = document.createElement('a')
    b.href = container.url
    return urlHostName === b.hostname
  })
}

此函數接收一組containers和給定的URL。 如果url的主機名與任何單個containers的主機名匹配，我想返回該容器。 這種方法可以正常工作，但是我不確定如何測試它，或者即使我應該也是如此。 我寫了一個最初看起來像這樣的測試：

describe('#checkForDuplicateUrl', () => {    
    const containers = [
      { id: 4, url: 'https://www.party.com'},
      { id: 5, url: 'elainebenes.com'}
    ]
    let url
    describe('when there is a duplicate container and the passed in are the same', () => {
      url = 'www.party.com'
      it('returns the container', () => {
        expect(checkForDuplicateUrl(containers, url).id).to.equal(4)
      })
    })
    describe('when there is a duplicate container and the passed in are the same hostname but one lacks www', () => {
      url = 'party.com'
      it('returns the container', () => {
        expect(checkForDuplicateUrl(containers, url).id).to.equal(4)
      })
    })
    describe('when there is a duplicate container and the passed in are the same hostname but one has https', () => {
      url = 'www.party.com'
      it('returns the container', () => {
        expect(checkForDuplicateUrl(containers, url).id).to.equal(4)
      })
    })
  })

問題是，當我在測試環境中運行此document.createElement('a') ， document.createElement('a')始終將localhost作為其主機名，因此傳入的內容並不重要。

如果我嘗試使用sinon對document.createElement()進行存根處理，那么我實際上並沒有進行任何測試，因為每次都必須手動返回主機名。

我是否應該測試此功能？ 如果是這樣，我應該如何測試？

Answer 1

首先，我認為您的測試用例看起來不錯，並且我認為這絕對是值得測試的東西。 存根外部對象/函數進行單元測試絕對是好的（並且在很多情況下建議這樣做）。

我確實感到非常困惑的是您使用document.createElement()從URL獲取主機名。 我會嘗試使用專用庫，例如url-parse 。

var URL = require('url-parse');
var url = new URL('http://www.google.com')
console.log(url.hostname); // 'google'

我不完全確定要傳遞給checkForDuplicateUrl()但是我認為這可以解決localhost問題。

Answer 2

這里的問題與以下事實有關：我要傳遞給函數的url之前沒有http 。 當您嘗試設置href上的a標簽，而不http中， a標簽只是抓住無論您目前的位置，在這種情況下是http://localhost 。

將url = 'www.party.com'更改為url = 'http://www.party.com'后，此測試將通過