如何在使用Jest測試React組件時模擬出子組件

我有一個React組件，我正在嘗試編寫一些測試。我已經把它分解成可能的最簡單的測試。如何在使用Jest測試React組件時模擬出子組件

jest.dontMock('../Overlay.react.js'); 

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

var Overlay = require('../Overlay.react.js'); // this is the culprit! 

describe('Overlay',() => { 
    it('should work',() => { 
     expect(true).toEqual(true); 
    }); 
});

當需要我試圖測試的組件時，它似乎不是在嘲笑它的子組件。在Overlay.react.js上，我有以下進口：import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react';當運行我的測試，我得到以下錯誤：

SyntaxError: /Users/dev/work/react-prototype/src/components/root/routes/components/subset1/components/Overlay.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/sass/style.sass: Unexpected token ILLEGAL

好像而不是嘲諷的成分，但一直到子組件的持續sass文件並投擲健身。我的理解是，Jest嘲笑一切，除了你告訴它而不是模擬。

什麼是正確的方式來制定這些測試，以便在測試過程中，子組件不會導致jest在導入時爆炸？

來源

2015-12-01 Jim

有一點自以爲是，但我只是在爲你想。你將會使用笑話來獲得許多這類錯誤，另外當你開始測試任何不重要的東西時，你會遇到性能問題。看看一些開放的[問題]（https://github.com/facebook/jest/issues/116）的笑話，並評估如果使用摩卡或茉莉花將是一個更好的選擇測試框架。 – enjoylife

否則，請查看[this]（http://stackoverflow.com/questions/27346687/reactjs-testing-components-containing-components）問題以獲取更多指導。 – enjoylife

@mattclemens有趣的。我只是真正閱讀過用笑話測試反應組件，所以這是默認設置。我會讀一些......你鏈接到的問題更多的是將子組件傳遞給你正在測試的組件，而不是它們似乎被導入。 – Jim

如果您需要SASS和LESS和CSS文件而不是每個子組件中的主要組件，那麼在您自行測試組件時不會出現此問題。

如果您不喜歡我提供的解決方案，還可以在本期的報告中提到其他解決方案。 Issue 334

來源

2015-12-14 20:11:07

在主要組件中需要避免它們被導入到較低級別的組件，但是不能遵循將組件的.js文件與它的樣式分組的模式。我添加了'if（filename.match（/。sass /）|| filename.match（/. less /）|| filename.match（/ .css /））{return;';我的預處理器已經超過了sass錯誤，但是它似乎在爲單個組件運行測試（而不是嘲笑它們全部）時吸引每個存儲和操作。 Jest的吸引力是automocking，似乎很奇怪... – Jim

那麼，我很抱歉，我忍不住。你檢查了這個問題嗎？ –

如何在使用Jest測試React組件時模擬出子組件

回答

相關問題