web-dev-qa-db-ja.com

Jest React-新しいスナップショットは書き込まれませんでした。新しいスナップショットを書き込むには、更新フラグを明示的に渡す必要があります

Reactテンプレートで作成されたasp.netコアプロジェクトがあり、Jestスナップショットで単純なコンポーネントを単体テストしようとしていますが、以下のエラーが発生します。修正方法を提案できる人はいますか？.

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

エラーログ：

expect（received）.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つのスナップショットが失敗しました。スナップショットの概要› 1つのテストスイートから1つのスナップショットが失敗しました。コードの変更を確認するか、-uでjestを再実行して更新してください。

テストスイート：失敗1、合格1、合計2テスト：失敗1、合格3、合計スナップショット4：失敗1、合計1時間：4.338sすべてのテストスイートを実行しました。 npm ERR！テストに失敗しました。詳細については、上記を参照してください。

javascriptreactjsreact-nativeasp.net-corejestjs
3
Auo

問題の2つの解決策1）package.jsonからcross-env CI = trueを削除しますOR 2）ユニットテストを実行するようにCICDを設定します。これを行うには、npmタスクをビルドパイプラインとタスク内のオプションを「カスタム」として選択し、コマンドをテストとして提供する

ビルドがトリガーされると、ユニットテストがトリガーされます。

0
Auo