有没有更好的方法来测试一个类的个别方法

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)