React＆Jest測試：連接到Redux的嵌套組件給出不變違規錯誤

因此，我有一個組件導入來使用Jest進行一些測試。React＆Jest測試：連接到Redux的嵌套組件給出不變違規錯誤

class MyComponent extends Component { 
    render() { 
    return (
     <div> 
     <OtherComponent /> 
     </div> 
    ); 
    } 
} 

export { MyComponent };

其中其它分量被定義爲：

class OtherComponent extends Component { ... } 
export default connect(...)(OtherComponent);

我的測試如下：

import React from 'react'; 
import { shallow } from 'enzyme'; 

import { MyComponent } from '../../components/MyComponent'; 
// ...

僅有的事實，內MyComponent的有OtherComponent，連接到終極版使用connect會導致測試文件中的以上輸入失敗：

不可違反：_registerComponent（...）：目標容器不是DOM元素。

at invariant (node_modules/fbjs/lib/invariant.js:44:15) 
    at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:311:76) 
    at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32) 
    at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23) 
    at Object.<anonymous> (my-app-directory/index.js:30:46) 
    at Object.<anonymous> (my-app-directory/components/OtherComponent.js:x:xx) 
    at Object.<anonymous> (my-app-directory/components/MyComponent.js:x:xx) 
    at Object.<anonymous> (my-app-directory/test/components/MyComponent.test.js:x:xx) 
    at handle (node_modules/worker-farm/lib/child/index.js:41:8) 
    at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3) 
    at emitTwo (events.js:106:13) 
    at process.emit (events.js:191:7) 
    at process.nextTick (internal/child_process.js:744:12) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9)

因此，如何能測試我的組件如果嵌套組件連接到終極版？ O_O」

更新：

我是從我的主要的應用程序文件導入從反應路由器的歷史，index.js，並把它稱爲推裏面的我OtherComponent方法中的一種新途徑。這似乎是造成這個問題的原因。所以我想我不應該在我的組件中使用歷史記錄？如果我選擇保持這種狀態，我將如何在測試中處理這個問題？

import { history } from '../'; // index.js file with ReactDOM injection 

class OtherComponent extends Component { 
    // ... 
    someMethod() { 
    callSomeActionCreator(); 
    history.push('/some/route'); 
    } 
}

來源

2017-02-16 nbkhope

單元測試的一種方式是隻關注實際的組件並只測試其行爲。要做到這一點，你必須嘲笑所有其他的依賴關係。在你的情況下，你可以模擬出OtherComponent，然後測試它是否使用了正確的參數。

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { MyComponent } from '../../components/MyComponent'; 

jest.mock('../../OtherComponent',() => 'OtherComponent')//note that the path is relative to your test files

這將與名稱OtherComponent一個簡單的組件更換OtherComponent。

來源

2017-02-17 08:40:13

只是爲了澄清，不變違規錯誤不是唯一的測試與react-redux。相反，當測試套件沒有提供用於裝入DOM的方式時，測試套件會失敗（很大程度上出於同樣的原因，如果您嘗試對不在DOM中的元素調用.render，則ReactDOM將失敗）。

迴應@Andreas說的 - 您可以使用jest.mock在測試設置期間初始化ReactDOM。然後，react-redux具體情況，你可以通過store到測試組件作爲道具：

import Timer from './Timer'; 
import { store } from './store'; 

jest.mock("./index.js",() => "root"); 

describe('Timer test: ',() => { 
    it('should render',() => { 
    const wrapper = <Timer store={store} /> 
    expect(wrapper); 
    }); 
});

關於您的更新：陣營路由器提供瞭如何測試您的應用here.的導航相關方面一個很好的例子您可以提供給jest.mock的附加參數也可以派上用場。

來源

2017-06-26 14:36:53

React＆Jest測試：連接到Redux的嵌套組件給出不變違規錯誤

回答

相關問題