ItemCard donc un test pour mon composant Item et j'ai essayé de rendre le composant ItemCard , puis d'utiliser ce wrapper pour créer un instantané mais il renvoie un ShallowWrapper {} vide ShallowWrapper {}
Veuillez consulter le code pour plus d'informations:
Item.test.js
// Jest Snapshot v1
exports[`<ItemCard/> renders and matches the snapshot 1`] = `ShallowWrapper {}`;
Le claquement qu'il crée:
import { shallow } from 'enzyme';
import { ItemCard } from '../Item';
const fakeItem = {
id: 'aksnfj23',
title: 'Fake Coat',
price: '40000',
description: 'This is suuuper fake...',
image: 'fakecoat.jpg',
largeImage: 'largefakecoat.jpg',
};
describe('<ItemCard/>', () => {
it('renders and matches the snapshot', () => {
const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);
// console.log(wrapper.debug());
expect(wrapper).toMatchSnapshot();
});
});
Autant que je sache, le ShallowWrapper devrait contenir du contenu au lieu d'être vide.
Quelqu'un peut-il me dire ce que je fais de mal ici?
Merci
8 Réponses :
J'ai rencontré le même problème après la mise à jour vers jest@24.0.0 Je suis revenu à la version précédente jest@23.6.0 pour le moment jusqu'à ce que je sache ce qui a changé. Si vous trouvez ce qui a changé, postez-le ici.
C'est tout ... Je viens de le réparer hier en rétrogradant Jest ... c'est bizarre mais maintenant ça marche bien.
déclassé et toujours confronté au même problème
Revenir à Jest 23 complet interrompt Babel si vous êtes sur la version 7 car il tente d'appeler la version 6.
Voir la réponse de Titenis et le problème lié à GitHub.
Pour jest v24, vous devez utiliser un sérialiseur d'instantanés comme https://github.com/adriantoine/enzyme-to-json
Cela ne fonctionne pas pour moi avec jest: 24 , enzyme: 3.9.0 , enzyme-adapter-react-16: 1.11.2 , enzyme-to-json: 3.3.5 . J'ai installé et configuré enzyme-to-json dans package.json mais ShallowWrapper toujours un ShallowWrapper vide dans le code de l'instantané. :( La seule chose qui fonctionne est d'utiliser un vieux react-test-renderer réactif fiable, ce qui n'est pas idéal.
Peut confirmer le travail avec jest: 24.1.0 , enzyme: 3.4.0 , enzyme-adapter-react-16: 1.2.0 , enzyme-to-json: 3.4.0 . Devrait être la réponse acceptée
Vous pouvez simplement utiliser la fonction de montage et de débogage comme ceci:
it('Should render Component', () => {
const wrapper = mount(<Component {...props} />);
expect(wrapper.debug()).toMatchSnapshot();
});
fonctionne également avec Shallow, mais contient juste un composant interne
avez-vous trouvé une solution à cela? Je suis confronté au même problème, il ne contient que innerComponent sans aucun code HTML.
utiliser la méthode debug () après le wrapper
it('renders and matches the snapshot', () => {
const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);
// console.log(wrapper.debug());
expect(wrapper.debug()).toMatchSnapshot(); });
Vous devez utiliser jest-enzyme comme:
https://github.com/airbnb/enzyme/issues/1533#issuecomment-479591007
J'ai rencontré le même problème et résolu en utilisant le sérialiseur https://github.com/adriantoine/enzyme-to-json .
npm install --save-dev enzyme-to-json
Une fois installé l'enzyme-to-json, nous pouvons utiliser quelque chose comme ci-dessous
import React, {Component} from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';
it('renders correctly', () => {
const wrapper = shallow(
<MyComponent className="my-component">
<strong>Hello World!</strong>
</MyComponent>,
);
expect(toJson(wrapper)).toMatchSnapshot();
});
La même chose peut être résolue en utilisant shallow().debug() mais préférez utiliser la méthode ci-dessus.
ajoutez également ci-dessous dans les configurations de plaisanterie: "snapshotSerializers": ["enzyme-to-json / serializer"] Il peut être dans le fichier 'package.json' dans l'objet "jest" ou dans le fichier 'jest.config.js'.
Il ne devrait pas être nécessaire de revenir à la version. Suite au DOC officiel
Vous devez ajouter ceci à votre configuration Jest :
{
"name": "my-project",
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}
}
indice: pourrait être aussi simple que de l'ajouter à votre package.json , comme:
"snapshotSerializers": ["enzyme-to-json/serializer"]
Désolé si ce n'était pas la réponse. Je viens de voir que personne ne l'a dit ici et cela doit aider d'autres perdants comme moi il y a quelques minutes.
Vous pouvez définir le même snapshotSerializers: ['enzyme-to-json/serializer'], dans jest.config.js
Peut-être un peu tard, mais j'ai réussi à trouver une solution à ce problème en utilisant https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getElement.html
describe("Button", () => {
it("should render basic button correctly", () => {
const tree = shallow(<Button></Button>);
expect(tree.getElement()).toMatchSnapshot();
});
});
ce travail sur Jest 26.5.3 et enzyme 3.10.5
Il semble que la
mountau lieu deshallowvous rendra heureux@Alex Non. Ceci n'est pas lié à mount / shallow.