Existe-t-il une meilleure méthode pour tester les méthodes individuelles d'une classe?

Question

J'ai une classe de composant contenant plusieurs méthodes. J'aimerais pouvoir tester chacune de ces méthodes individuellement. Jusqu'à présent, je l'ai essayé d'exporter chacun individuellement à tester et les ajouter à la classe après leur création, comme:

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 

Et puis dans myClass.test.js ont mes tests mis en place

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)) 
    }) 
}) 

semble fonctionner:

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

Je n'ai pas vu une approche comme ça ailleurs, mais je l'ai pas non plus trouvé beaucoup sur la façon de tester les méthodes qui existent wi mince une classe, donc

Quelle est la manière canonique de tester des méthodes individuelles d'une classe Réagir?

Modifier

Ces tests sont simples et ne servent d'aucune utilité; ils sont juste une démonstration de l'idée. Je ne demande pas leur utilité ou comment concevoir des tests pour eux.

Answer 1

J'ai suivi une approche pour tester les méthodes d'un composant. Vous pouvez utiliser cette approche si vous utilisez enzyme. Pour cela, vous devez effectuer un rendu superficiel du composant à l'aide du shallowenzyme, puis appeler le instance().myMethod() pour appeler la méthode nommée myMethod.

Voici un petit exemple.

React Composant:

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

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

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

suite de tests pour le composant ci-dessus: (En supposant que vous utilisez jest et 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); 
    }); 
}); 

Une chose à noter ici est que notre méthode sayHello retourne un élément JSX, et qui est la raison pour laquelle nous sommes peu profonds rendant à nouveau pour tirer parti des shallow rendering api

Si nous devions tester juste sayBye méthode, Nous pouvons simplement comparer la valeur de retour de la méthode avec la valeur attendue.

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

Hope this helps :)

Answer 2

Techniquement, vous ne testez rien; Vous appelez la méthode, et la fonction que vous avez liée à cette méthode, puis comparez leurs résultats, qui seront toujours identiques. Vous avez effectivement fait cela:

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

Le point entier d'un test unitaire est d'appeler une fonction ou d'une méthode, puis le comparer à une valeur que vous avez codé en dur.

Alors d'abord, mettez vos méthodes dans votre classe. Ensuite, appelez chacune de ces méthodes dans un test distinct, puis comparez la valeur à une valeur que vous avez manuellement ajoutée au test.

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

Même si le résultat est plus compliqué que cela, vous devriez toujours comparer une version codée en dur. De même, tester une classe peut être quelque chose comme:

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