2017-10-17 168 views
0

我正在用Typescript/React創建.tsx組件。我想對React組件中的方法進行一些單元測試。你說:Jest + Typescript如何測試React組件中的方法?

export default class SomeComponent extends React.Component<undefined, SomeComponentState> { 

    someMethod = (string: someInput) => { 
     return someInput + someInput; 
    } 
    render() .. // etc 
} 

在SomeComponent.test.tsx文件,我該如何導入和測試someMethod的方法,而不是整個組件本身?

我已經試過:

import {someMethod} from "./someComponent"; 

雖然沒有運氣 - 它似乎並沒有成爲可調用,並且會拋出TS錯誤:「組件沒有出口成員的someMethod」

+1

除非是靜態方法,否則沒有實例化組件測試它是沒有意義的 –

回答

0

其成員的類,所以你需要一個實例來測試它。你不能直接導入它。如果它不需要訪問實例上的其他任何內容,則可以將其作爲獨立函數提取並導出。

或者使用enzyme你可以用類似這樣的方法測試它: import'shallow'from'enzyme';

it('.....',() => { 
    const wrapper = shallow(<SomeComponent />); 
    (wrapper.instance() as SomeComponent).someMethod('someValue'); 
}) 
+0

我試過用酶;似乎也沒有工作。用你的方法,我得到「屬性someMethod不存在於類型組件」 – cbll

+0

你可能需要告訴TS類型,例如'''wrapper.instance()SomeComponent''''' – wgcrouch

+0

好吧,它可以工作,但是測試失敗有一些模糊的錯誤:'SyntaxError:Unexpected token <'hmm .. – cbll

相關問題