est-il possible d'utiliser réagir-virtualisé et enzymatique ensemble? Lorsque j'essaie de les utiliser ensemble, je semble obtenir une liste vide d'éléments dans la grille.
3 Réponses :
Le 2 devrait travailler ensemble, oui. Je pense que le problème probable est que le composant réactif-virtualisé est en train de donner une largeur ou une hauteur de 0 qui le fait de ne rien rendre. (Cela ne rend que suffisamment pour remplir la "fenêtre" qu'elle a.)
supposer que vous utilisez l'autosizer Hoc- (la plupart des gens le font) - alors un modèle que j'ai trouvé utile est d'exporter 2 versions de composants - un qui s'attend à ce que des propriétés explicites de largeur / de hauteur et une propriété qui enveloppe l'autre avec un autogorneur. Le pseudo code serait:
Une chose que j'ai oubliée de mentionner. J'utilise une enzyme dans Node.js en utilisant JSDOM. L'autosser repose-t-il sur les API de mesure DOM vraies?
Cela dépend de getboundingClientRect et getcomputedstyle . Vous pouvez voir comment il mesure les choses ici: Github .com / bvaughn / réacteur-virtualisé / blob / maître / source / ...
OK Bien que votre recommandation de contournement d'Autorésiseur est la meilleure depuis que getboundingClientRect n'est pas exacte dans JSDOM.
Ne devriez-vous pas passer hauteur et largeur (les paramètres de l'autosuffeur rendu rappel) sur MyComponent?
Oui. L'exemple était juste écrit rapidement comme un croquis. Je l'ai mis à jour.
Tu es un sauveur! <3
Mettre cela dans mon étui de test a fonctionné pour moi:
import { AutoSizer } from 'react-virtualized';
// ...
it('should do something', function() {
spyOn(AutoSizer.prototype, 'render').and.callFake(function render() {
return (
<div ref={this._setRef}>
{this.props.children({ width: 200, height: 100 })}
</div>
);
});
// do something...
A-t-il eu avec Jest comme celui-ci: jest.mock ('réact-virtualisé-auto-sifiseur', () => {retournez mockautosizer;}); où le module est la fonction que vous venez de décrire.
comme de réacteur-virtualisé 9.12.0 L'autosiseur a defaultwidth et défauttheight Propriétés.
J'ai trouvé que des tests d'enzymes signifiaient correctement - rendant les lignes de l'enfant comme prévu.
Merci beaucoup! Je ne pouvais pas comprendre pourquoi console.log (wrapper.debug ()); n'était pas afficher de données pour des lignes - seuls les en-têtes étaient affichés.
Êtes-vous convaincu que vous passez une largeur et une hauteur> 0 à la grille? (Toute chance que vous puissiez partager du code?)
Laissez-moi faire un exemple simplifié.
Je pense que le problème est que j'utilise Autosizer. Continuera à enquêter ...
Aucun problème. Je vais ajouter une "réponse" afin que je puisse formater un exemple de code.