快照測試帶Jest的ChartJS組件

Question

我正在爲使用ChartJS v2的反應組件編寫一些快速測試快照測試。我的Customer組件測試看起來像這樣

import React from 'react'; 
import renderer from 'react-test-renderer'; 

import CustomerComponent from '../src/components/customer/Customer'; 

describe('Customer',() => { 
    it('renders customer',() => { 
    const tree = renderer.create(
     <Customer customerId={291}/> 
    ).toJSON(); 
    expect(tree).toMatchSnapshot(); 
    }); 
}); 

當我開玩笑運行它，我得到這個

FAIL tests/Customer.test.js 
    ● Test suite failed to run 

    ReferenceError: window is not defined 

     at node_modules/chart.js/src/core/core.helpers.js:672:10 
     at Object.<anonymous>.module.exports (node_modules/chart.js/src/core/core.helpers.js:680:3) 
     at Object.<anonymous> (node_modules/chart.js/src/chart.js:6:31) 
     at Object.<anonymous> (node_modules/react-chartjs-2/lib/index.js:20:14) 

看來ChartJS希望定義一個窗口對象，它是不可用，因爲這是沒有在瀏覽器中運行。有沒有辦法讓快照測試與ChartJS一起工作？

Answer 1

只是模擬出從chartsjs

jest.mock('react-chartjs2',() => 'Chart') 

這個圖表組件將取代與轉儲一個，將只呈現在你的快照<Chart prop="prop">原始的組件。