web-dev-qa-db-fra.com

Jest / Enzyme ShallowWrapper est vide lors de la création d'un instantané

J'écris 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

Veuillez consulter le code pour plus d'informations:

Item.test.js

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

Le claquement qu'il crée:

// Jest Snapshot v1

exports[`<ItemCard/> renders and matches the snapshot 1`] = `ShallowWrapper {}`;

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 mal ici?

Merci

reactjstestingjestjsenzymesnapshot
15
dragi

J'ai rencontré le même problème après la mise à jour vers [email protected]. Pour le moment, je suis revenu à la version précédente [email protected] jusqu'à ce que je comprenne ce qui a changé. Si vous trouvez ce qui a changé, postez-le ici.

6
user2564429

Pour Jest v24, vous devez utiliser un sérialiseur d'instantanés comme https://github.com/adriantoine/enzyme-to-json

source: https://github.com/facebook/jest/issues/7802

17
Titenis

Vous devez utiliser jest-enzyme comme:

https://github.com/airbnb/enzyme/issues/1533#issuecomment-479591007

4
Jeyhun Ashurbayov

Il ne devrait pas être nécessaire de rétablir la version. Suivre le document officiel DOC

Vous devez l'ajouter à votre configuration Jest :

"snapshotSerializers": ["enzyme-to-json/serializer"]

indice: pourrait être aussi simple que de l'ajouter à votre package.json , comme:

{
  "name": "my-project",
  "jest": {
    "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.

4
Uri.Ustrell

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();
  });
3
samuelgomez

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(); });
1
Shivam

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-à-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();
});

Le même problème peut être résolu en utilisant shallow().debug() mais préférez utiliser la méthode ci-dessus.

1
RKM