2017-03-27 84 views
6

我想對我的項目有100%的覆蓋率。測試一個create-react-app index.js文件

img

爲了做到這一點,我需要測試我的index.js文件,該文件是很基本的:

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(<App/>, document.getElementById('root')); 

我找不到如何測試這個。 當創建一個功能,如:

index.js

const index = (div) => { 
    ReactDOM.render(<App />, div || document.getElementById('root')); 
}; 

,然後測試它:

index.test.js

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    index(div); 
}); 

導入時我得到一個錯誤index: 不變違規:_registerComponent (...):目標容器不是DOM元素。

PS:

請注意,我已經有了下面的測試,完美的工作:

App.test.jsx

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(<App/>, div); 
}); 

回答

4

的主要問題是要測試那裏。如果你想測試你的代碼的工作是否正確,寫一個間諜ReactDOM.render和嘲笑document.getElementById('root')的單元測試。因爲這是您所有的代碼,請使用我們的應用程序組件和特定的div調用ReactDOM.render

import ReactDOM from 'react-dom'; 
... 
jest.mock('react-dom',()=> ({render: jest.fn()})) 


it('renders without crashing',() => { 

    const div = document.createElement('div'); 
    ReactDOM.render(<App/>, div); 
    global.document.getElementById = (id) => id ==='root' && div 
    expect(ReactDOM.render).toHaveBeenCalledWith(...) 
}); 

如果你想測試應用真正開始在你的頁面,你應該寫集成測試與硒或Nightwatch.js

只得到通過增加它100%的覆蓋率也可以忽略這個文件在你開玩笑設置coveragePathIgnorePatterns

+0

我想要做的是要麼忽略笑話覆蓋index.js,或實際上有我的索引文件的測試,以便有來自開玩笑--coverage 100%的覆蓋率。 將'coveragePathIgnorePatterns「:[」src/index.js「]'添加到'package.json'不起作用... –

+1

更新我的答案,即使我認爲100%的覆蓋率不應該成爲測試的目標。 –

+0

'react-scripts test --env = jsdom --coverage --collectCoverageFrom = src/**/*。js?--collectCoverageFrom =!src/index.js' works,but directly'collectCoverageFrom' in'package .json'不起作用 'coveragePathIgnorePattern'似乎根本不起作用...... –

1

如果你的項目100%的覆蓋率是你的目標和你的index.js文件中的代碼是微不足道的,那麼它可能是排除從覆蓋報告的文件一個不錯的選擇,如安德烈亞斯Köberle在他的回答中指出。

創建反應的應用內目前僅支持在玩笑配置這四個鍵(source):

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

這就是爲什麼

coveragePathIgnorePatterns": ["src/index.js"]

將不起作用。

添加以下代碼到你的package.json文件的最外部範圍:

"jest": { 
    "collectCoverageFrom": [ 
    "src/**/*.{js,jsx}", 
    "!src/index.js" 
    ] 
} 

在圖像下面你看到這段代碼的測試運行的輸出添加到初始的應用程序與創建創建package.json -react-app v1.4.3。請注意,index.js文件不再顯示在報告中,也不會影響覆蓋百分比。

Coverage report