有沒有更好的方法來測試一個類的個別方法

Question

我有一個組件類包含幾種方法。我希望能夠單獨測試每種方法。到目前爲止，我已經試過各自單獨導出到測試並創建後添加到類，如：

export const getStrFun =() => 'lorem ip' 
export const getNumFun = n => n 
export const getJsxFun = (el, i) => <li key={i}>{el}</li> 
class MyClass extends Component { 
    getStrFun = getStrFun 
    getNumFun = getNumFun 
    getJsxFun = getJsxFun 
    render() { 
    return (
     <section> 
     <p>{this.getStrFun()}</p> 
     <p>{this.getNumFun(2)}</p> 
     <ol>{['abc', '123', 'αβγ'].map(this.getJsxFun)}</ol> 
     </section> 
    ) 
    } 
} 

export default MyClass 

然後在myClass.test.js有我的測試設置

import MyClass, { getStrFun, getNumFun } from '../MyClass' 

describe('<MyClass',() => { 
    it('should render the component',() => { 
    const component = renderer.create(<MyClass />) 
    const tree = component.toJSON() 
    expect(tree).toMatchSnapshot() 
    }) 

    it('should return the number it is given',() => { 
    const number = 100 
    const result = getNumFun(number) 
    expect(result).toEqual(number) 
    }) 

    it('should return a string',() => { 
    const result = getStrFun() 
    expect(result).toEqual(expect.any(String)) 
    }) 
}) 

似乎工作：

<MyClass 
    ✓ should render the component (16ms) 
    ✓ should return the number it is given (1ms) 
    ✓ should return a string (1ms) 

我從來沒見過像這樣的做法在其他地方，但我也沒有找到關於如何測試中存在的無線方法很多瘦一類，所以

什麼是規範的方式來測試React類的個別方法？

編輯

這些測試很簡單，沒有任何用處;他們只是這個想法的一個示範。我不是在問他們的用處或者如何爲他們設計測試。

Answer 1

我一直在關注一種方法來測試組件的方法。如果您使用的是enzyme，則可以使用此方法。爲此，您需要使用enzyme的shallow淺顯示組件，然後調用instance().myMethod()調用名爲myMethod的方法。

這是一個小例子。

陣營組件：

class Welcome extends React.Component { 
    sayHello =() => { 
     return(
      <h1>Hey there!</h1> 
     ); 
    } 

    sayBye =() => { 
     return "Bye Bye!!" 
    } 

    render() { 
     return(
      <div>{this.sayHello()}</div> 
     ); 
    } 
} 

測試套件上述組分：（假設使用的是jest和enzyme。）

import {shallow} from 'enzyme'; 

describe('Test sayHello and sayBye method',() => { 
    const componentTree = shallow(
     <Welcome /> 
    ); 

    it('should display a greeting message',() => { 
     const returnedValue = shallow(componentTree.instance().sayHello()); 
     expect(returnedValue.text()).toEqual('Hey there!'); 
     expect(returnedValue.find('h1').length).toBe(1); 
    }); 
}); 

這裏有一點要注意的是，我們的sayHello方法返回一個JSX元素，這就是爲什麼我們很淺再次渲染它如果我們只是測試sayBye採取的shallow rendering api

優勢方法，我們可以比較方法的返回值和期望值。

// Testing sayBye method 
it('should say Bye Bye!!',() => { 
    expect(componentTree.instance().sayBye()).toEqual('Bye Bye!!'); 
}); 

希望這有助於:)

Answer 2

你在技術上沒有測試任何東西;您將調用該方法以及您綁定到該方法的函數，然後比較它們的結果，這些結果總是相同的。你有效地做到了這一點：

expect(someFunction()).toEqual(someFunction()) 

單元測試的要點是調用一個函數或方法，然後把它比作一個值，你已經硬編碼。

所以首先，把你的方法放在你的班級裏。接下來，在單獨的測試中調用每個方法，然後將該值與手動放入測試的值進行比較。

expect(someFunction()).toEqual('a hard-coded result') 

即使結果比這更復雜，您應該始終比較一個硬編碼版本。同樣，測試類可能類似於：

let instance = new SomeClass() 
expect(instance.someMethod()).toEqual('a hard-coded result') 
expect(instance.anotherMethod()).toEqual(true)