Scherz: mocking-Konsole.error - tests fehlschlägt

Das Problem:

Habe ich eine einfache Reagieren Komponente, die ich mit lernen, test-Komponenten, die mit Scherz und Enzym. Wie arbeite ich mit props, ich habe den prop-types Modul zu prüfen, für die Eigenschaften in der Entwicklung. prop-types verwendet console.error um zu warnen, wenn die obligatorische Requisiten, die nicht bestanden sind oder als Requisiten sind der falsche Datentyp.

Ich wollte mock console.error zu zählen, wie oft es hieß, von prop-types als ich an fehlende/mis-typed Requisiten.

Mit diesem vereinfachten Beispiel-Komponente und testen, würde ich erwarten, dass die beiden tests zu Verhalten, wie Z:

  1. Der erste test mit 0/2 erforderliche Requisiten fangen sollte der mock ruft zweimal.
  2. Der zweite test mit 1/2 erforderliche Requisiten fangen sollte das mock einmal aufgerufen.

Anstelle, bekomme ich diese:

  1. Der erste test verläuft erfolgreich.
  2. Der zweite test schlägt fehl, beschwert sich, dass die mock-Funktion aufgerufen wurde null mal.
  3. Wenn ich tausche die Reihenfolge der tests, die erste funktioniert und die zweite ausfällt.
  4. Wenn ich den split jeden test in eine einzelne Datei, die beide arbeiten.
  5. console.error Ausgabe unterdrückt, so ist es klar, es ist verspottet für beide.

Ich bin mir sicher, dass ich bin vermisste von etwas offensichtlichem, wie das clearing der mock falsch oder was auch immer.

Wenn ich die gleiche Struktur gegen ein Modul exportiert die Funktion, den Aufruf console.error einer beliebigen Anzahl von Zeiten, die Dinge funktionieren.

Es ist, wenn ich den test mit Enzym/reagieren, dass ich traf diese Wand nach dem ersten test.

Probe App.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class App extends Component {

  render(){
    return(
      <div>Hello world.</div>
    );
  }
};

App.propTypes = {
  id : PropTypes.string.isRequired,
  data : PropTypes.object.isRequired
};

Probe App.test.js

import React from 'react';
import { mount } from 'enzyme';
import App from './App';

console.error = jest.fn();

beforeEach(() => {
  console.error.mockClear();
});

it('component logs two errors when no props are passed', () => {
  const wrapper = mount(<App />);
  expect(console.error).toHaveBeenCalledTimes(2);
});

it('component logs one error when only id is passed', () => {
  const wrapper = mount(<App id="stringofstuff"/>);
  expect(console.error).toHaveBeenCalledTimes(1);
});

Letzte Anmerkung: Ja, ist es besser zu schreiben der Komponente zu erzeugen benutzerfreundliche Ausgabe, wenn die Requisiten fehlen, dann testen Sie für, die. Aber einmal fand ich dieses Verhalten, wollte ich herausfinden, was ich falsch mache, als ein Weg, um zu verbessern mein Verständnis. Klar, ich bin etwas fehlt.

InformationsquelleAutor Matthew Bakaitis | 2017-06-16
  1. 2

    Du nichts vermissen. Es ist ein bekanntes Problem (https://github.com/facebook/react/issues/7047) über fehlende Fehler/Warnmeldungen.

    Wenn Sie schalten Sie Ihr test-Fällen ("...wenn nur die id übergeben' - der ersten, "...wenn keine Requisiten bestanden " - die zweite), und solche
    console.log('mockedError', console.error.mock.calls); in Ihrem test Fällen können Sie sehen, dass die Nachricht über fehlende id nicht ausgelöst, im zweiten test.

    InformationsquelleAutor DLyman
  2. 10

    Ich lief in ein ähnliches problem, musste nur den cache der ursprünglichen Methode

    const original = console.error

beforeEach(() => {
  console.error = jest.fn()
  console.error('you cant see me')
})

afterEach(() => {
  console.log('log still works')
  console.error('you cant see me')
  console.error = original
  console.error('now you can')
})
    • Sie nicht brauchen, um cache die original-Methode. Sie können nur tun console.error.mockRestore()
    • interessant, ich werde ihm eine Chance geben das nächste mal Lauf ich in es
    • mockRestore funktioniert nicht in diesem Fall. Von Scherz-24-Dokumentation: "Hüten Sie sich vor, dass mockFn.mockRestore funktioniert nur, wenn mock wurde mit Scherz.spyOn. So müssen Sie kümmern sich um die Wiederherstellung selbst bei der manuellen Vergabe Scherz.fn()."
    • danke, die Antwort wurde aktualisiert.
    InformationsquelleAutor lfender6445
  3. 7

    Gegeben, die das Verhalten erklärt durch @DLyman, Sie könnte es tun, wie:

    describe('desc', () => {
    let spy = spyConsole();

    it('x', () => {
        //[...]
    });

    it('y', () => {
        //[...]
    });

    it('throws [...]', () => {
        shallow(<App />);
        expect(console.error).toHaveBeenCalled();
        expect(spy.console.mock.calls[0][0]).toContain('The prop `id` is marked as required');
    });
});

function spyConsole() {
    //https://github.com/facebook/react/issues/7047
    let spy = {};

    beforeAll(() => {
        spy.console = jest.spyOn(console, 'error').mockImplementation(() => {});
    });

    afterAll(() => {
        spy.console.mockRestore();
    });

    return spy;
}
    InformationsquelleAutor Mike Gleason jr Couturier
  4. 5

    Was die Jungs oben geschrieben haben, ist korrekt. Ich habe encoutered ähnliches problem und hier meine Lösung. Es dauert auch Berücksichtigung der situation, wenn man dabei einige assertion auf die verspottet Objekt:

    beforeAll(() => {
    //Create a spy on console (console.log in this case) and provide some mocked implementation
    //In mocking global objects it's usually better than simple `jest.fn()`
    //because you can `unmock` it in clean way doing `mockRestore` 
    jest.spyOn(console, 'log').mockImplementation(() => {});
  });
afterAll(() => {
    //Restore mock after all tests are done, so it won't affect other test suites
    console.log.mockRestore();
  });
afterEach(() => {
    //Clear mock (all calls etc) after each test. 
    //It's needed when you're using console somewhere in the tests so you have clean mock each time
    console.log.mockClear();
  });
    InformationsquelleAutor Papi
  5. 0

    Für meine Lösungen ich bin nur Verpackung original Konsole und kombinieren Sie alle Nachrichten, die in arrays. Kann jemand sein, den es benötigt.

    const mockedMethods = ['log', 'warn', 'error']
export const { originalConsoleFuncs, consoleMessages } = mockedMethods.reduce(
  (acc: any, method: any) => {
    acc.originalConsoleFuncs[method] = console[method].bind(console)
    acc.consoleMessages[method] = []

    return acc
  },
  {
    consoleMessages: {},
    originalConsoleFuncs: {}
  }
)

export const clearConsole = () =>
  mockedMethods.forEach(method => {
    consoleMessages[method] = []
  })

export const mockConsole = (callOriginals?: boolean) => {
  const createMockConsoleFunc = (method: any) => {
    console[method] = (...args: any[]) => {
      consoleMessages[method].push(args)
      if (callOriginals) return originalConsoleFuncs[method](...args)
    }
  }

  const deleteMockConsoleFunc = (method: any) => {
    console[method] = originalConsoleFuncs[method]
    consoleMessages[method] = []
  }

  beforeEach(() => {
    mockedMethods.forEach((method: any) => {
      createMockConsoleFunc(method)
    })
  })

  afterEach(() => {
    mockedMethods.forEach((method: any) => {
      deleteMockConsoleFunc(method)
    })
  })
}
    InformationsquelleAutor Sergey Volkov
Schreibe einen Kommentar