web-dev-qa-db-fra.com

Jest React - Un nouvel instantané n'a pas été écrit. L'indicateur de mise à jour doit être explicitement passé pour écrire un nouvel instantané

J'ai un projet principal asp.net créé avec le modèle React, essayant de tester un composant simple avec un instantané Jest et je reçois une erreur ci-dessous. Quelqu'un peut-il suggérer comment le corriger.

index.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Button } from 'reactstrap'

const CloseHistoryButton = ({ onClick }) =>
    <div className="d-flex justify-content-end">
        <Button color="danger" size="sm" onClick={onClick}>
            <FontAwesomeIcon icon="times" /> Close History
        </Button>
    </div>

export default CloseHistoryButton

CloseHistoryButton.test

import ReactDOM from 'react-dom';
import { shallow, mount, render } from 'enzyme';
import { cleanup } from '@testing-library/react';
import renderer from 'react-test-renderer';
import CloseHistoryButton from '../CloseHistoryButton/index';
import registerIcons from './../../../../icons/registerIcons';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

// automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup);
registerIcons();
test('renders correctly', () => {
    const tree = renderer.create(
                                <CloseHistoryButton />
                                ).toJSON();
    expect(tree).toMatchSnapshot();
});

Journal des erreurs:

attendre (reçu) .toMatchSnapshot ()

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received value
<div
  className="d-flex justify-content-end"
>
  <button
    aria-label={null}
    className="btn btn-danger btn-sm"
    onClick={[Function]}
  >
    <svg
      aria-hidden="true"
      className="svg-inline--fa fa-times fa-w-11 "
      data-icon="times"
      data-prefix="fas"
      focusable="false"
      role="img"
      style={Object {}}
      viewBox="0 0 352 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
        fill="currentColor"
        style={Object {}}
      />
    </svg>
     Close History
  </button>
</div>

  27 |                                 <CloseHistoryButton />
  28 |                                 ).toJSON();
> 29 |     expect(tree).toMatchSnapshot();
     |                  ^
  30 | });
  31 |
  32 | describe('Test Button component', () => {

  at Object.toMatchSnapshot (src/features/FleetImport/Results/CloseHistoryButton/CloseHistoryButton.test.js:29:18)

›1 instantané a échoué. Résumé de l'instantané ›1 instantané a échoué à partir d'une suite de tests. Inspectez vos modifications de code ou réexécutez la plaisanterie avec -u pour les mettre à jour.

Suites de tests: 1 échec, 1 réussite, 2 au total Tests: 1 échec, 3 réussite, 4 total Instantanés: 1 échec, 1 total Durée: 4,338 s Exécution de toutes les suites de tests. npm ERR! Test échoué. Voir ci-dessus pour plus de détails.

javascriptreactjsreact-nativeasp.net-corejestjs
3
Auo

Deux solutions au problème 1) supprimez cross-env CI = true de package.json OR 2) Configurez le CICD pour exécuter les tests unitaires .--- Pour ce faire, ajoutez une tâche npm dans le pipeline de génération et sélectionnez l'option dans la tâche comme "personnalisée" et fournissez la commande comme test

cela devrait déclencher les tests unitaires chaque fois qu'une génération est déclenchée.

0
Auo