Pourquoi le rendu superficiel ne fonctionne-t-il pas comme prévu?

Question

J'utilise l'enzyme pour tester mon composant create-react-app, mais cela n'a pas fonctionné intuitivement. Est-ce que je ne comprends pas ce qu'est le rendu superficiel?

import React from "react"; 
import { Card } from "./Card"; 

const TestUser =() => { 
    return (
    <div> 
     <div className="test" /> 
     <div className="wrapper"> 
     <Card /> 
     <Card /> 
     <Card /> 
     </div> 
    </div> 
); 
}; 

export default TestUser; 

.test.js

import React from "react"; 
import TestUser from "./TestUser"; 
import { shallow } from "enzyme"; 
import { Card } from "./Card"; 

it("should render right",() => { 
    const component = shallow(<TestUser />); 
    expect(component.find(Card)).to.have.length(3); 
}); 

Je pense qu'il devrait passer le test, parce que elle a 3 Card composants TestUser

Mais il sortie: TypeError: Impossible de lire la propriété « ont 'de undefined

Comment cela fonctionne-t-il?

Answer 1

Essayez-le. Vous devez le donner en chaîne littérale. Aussi pour moi la bibliothèque expect que vous utilisez n'est pas celle que vous obtenez de chai et peut avoir un ensemble différent de méthodes auxiliaires, d'où cette erreur. Malheureusement, je n'ai pas le code avec moi pour vérifier plus loin. Rien de mal avec le rendu superficiel du tout.

import React from "react"; 
import TestUser from "./TestUser"; 
import { shallow } from "enzyme"; 
import { expect } from 'chai'; 

it("should render right",() => { 
    const component = shallow(<TestUser />); 
    expect(component.find('Card')).to.have.length(3); 
}); 

vous n'avez pas besoin d'avoir cette déclaration ici, import Card from "./card";

Dans la composante TestUser modifier l'instruction d'importation comme celui-ci.

import Card from "./card"; 

Alors maintenant, votre composant TestUser devrait ressembler à ceci.

import React from "react"; 
import Card from "./card"; 

const TestUser =() => { 
    return (
    <div> 
     <div className="test" /> 
     <div className="wrapper"> 
     <Card /> 
     <Card /> 
     <Card /> 
     </div> 
    </div> 
); 
}; 

export default TestUser; 

Utilisez la commande suivante pour installer la bibliothèque chai.

npm install --save chai 

Si vous voulez vraiment utiliser Jest, changez votre assertion comme ci-dessous.

import React from "react"; 
import TestUser from "./testuser"; 
import { shallow } from "enzyme"; 

it("should render right",() => { 
    const component = shallow(<TestUser />); 
    expect(component.find('Card')).toHaveLength(3); 
}); 

Personnellement, j'aime moka en raison de son API fluide.

Espérons que cela aide. Codage heureux!

Answer 2

it("should render right",() => { 
    const component = shallow(<TestUser />); 
    const element = component.find('wrapper'); 
    chai.expect(element.props.children).to.have.length(3); 
}); 

Answer 3

rendu peu profond ne va pas aussi profond que vous voulez dans ce cas, à cause de votre div imbrication. http://airbnb.io/enzyme/docs/api/shallow.html

Soit utiliser mount ou utilisez .dive() API pour aller un autre niveau. Voir l'exemple dans les documents de l'enzyme: http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html