Testing réagir les composants qui ont JSS injectés styles avec une enzyme

Question

J'ayant une composante réagir. Disons Todo

import React, { Component } from 'react'; 
import injectSheet from 'react-jss'; 

class Todo extends Component { 

    // methods that incl. state manipulation 

    render() { 
     const { classes } = this.props; 
     return (
      <div className={classes.container}> 
       <WhateverElse /> 
      </div> 
     ); 
    } 
} 

export default injectSheet(Todo); 

Je veux le tester avec l'enzyme. Et il y a deux problèmes avec cela.

1. L'accès à l'état (et d'autres caractéristiques spécifiques des composants)

Quand je shallow ou mount que le compositeur dans la suite je ne peux pas avoir accès à son état bien sûr parce que ce n'est pas mon élément plus mais quelque chose de nouveau autour d'elle.

E.g. ce code me donne une erreur:

it('should have state updated on handleAddTodo',() => { 
    const todo = shallow(<Todo />); 

    const length = todo.state('todos').length; 
}); 

Il dit bien sûr TypeError: Cannot read property 'length' of undefined parce que l'État n'est pas ce que je pense que ceci: { theme: {}, dynamicSheet: undefined }

Cela ne m'a donner accès à props, refs etc.

2. problèmes avec le fournisseur thème

pour donner une coloration par défaut au projet comme celui-ci:

import React, { Component } from 'react'; 
import Colors from './whatever/Colors'; 

class App extends Component { 
    render() { 
     return (
      <ThemeProvider theme={Colors}> 
       <WhateverInside /> 
      </ThemeProvider> 
     ); 
    } 
} 

Et bien sûr lors de l'exécution des tests, il me donne une erreur [undefined] Please use ThemeProvider to be able to use WithTheme.

Donc, ma question est la suivante. Y a-t-il un moyen de résoudre ce problème dans "un seul endroit". Comment puis-je rendre l'enzyme agnostique de ce à quoi mon composant est enveloppé?

Sinon, comment puis-je résoudre le problème si le passage ThemeProvider présente jusqu'à la composante que je teste? Et comment puis-je accéder à l'état, ref, accessoires et autres choses du composant enveloppé?

Merci!

Answer 1

1. Il n'est pas spécifiquement lié à JSS. Tout HOC enveloppe votre composant. Idéalement, vous ne testez aucun interne d'un composant directement.

   • Composants api public est des accessoires, de les utiliser pour rendre votre composant avec un état spécifique et vérifier la sortie rendue avec renderer peu profonde.

   • Pour certains cas de pointe si la première façon et préférée est impossible, vous pouvez accéder au composant interne directement et l'accès que vous avez besoin directement. Vous devrez vous moquer des accessoires que le HOC passerait autrement pour vous.

const StyledComponent = injectSheet(styles)(InnerComponent) 
 
console.log(StyledComponent.InnerComponent)

2. Si votre composant repose sur thématisation, vous devez fournir un fournisseur de thème, toujours.