So testen Sie einen Klassennamen mit der Jest- und React-Testbibliothek

Ich bin völlig neu im JavaScript-Testen und arbeite in einer neuen Codebasis. Ich möchte einen Test schreiben, der nach einem Klassennamen für das Element sucht. Ich arbeite mit Jest und Reaktionstestbibliothek. Unten habe ich einen Test, der eine Schaltfläche basierend auf rendert variant Stütze. Es enthält auch einen Klassennamen und das würde ich gerne testen.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

Ich habe versucht, nach einer Eigenschaft wie Enzyme zu googeln hasClass, aber ich konnte nichts finden. Wie kann ich das mit den aktuellen Bibliotheken lösen (Reaktionstestbibliothek und Scherz)?

Das geht ganz einfach mit der React-Testing-Library.

Das muss man erstmal verstehen container oder das Ergebnis von getByText usw. sind lediglich DOM-Knoten. Sie können mit ihnen auf die gleiche Weise interagieren, wie Sie es in einem Browser tun würden.

Wenn Sie also wissen möchten, auf welche Klasse angewendet wird container.firstChild du kannst es einfach so machen container.firstChild.className.

Wenn Sie mehr darüber lesen className in MDN Sie werden sehen, dass es zurückkehrt alle die Klassen, die auf Ihr Element angewendet werden, getrennt durch ein Leerzeichen, das heißt:

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

Dies ist je nach Fall möglicherweise nicht die beste Lösung. Keine Sorge, Sie können beispielsweise eine andere Browser-API verwenden classList.

expect(container.firstChild.classList.contains('foo')).toBe(true)

Das ist es! Sie müssen keine neue API lernen, die nur für Tests funktioniert. Es ist genauso wie im Browser.

Wenn Sie häufig nach einer Klasse suchen, können Sie die Tests vereinfachen, indem Sie sie hinzufügen Scherzdom zu Ihrem Projekt.

Der Test wird dann:

expect(container.firstChild).toHaveClass('foo')

Es gibt eine Reihe anderer praktischer Methoden wie z toHaveStyle das könnte dir helfen.

Nebenbei bemerkt, React-Testing-Library ist ein richtiges Dienstprogramm zum Testen von JavaScript. Es hat viele Vorteile gegenüber anderen Bibliotheken. Ich ermutige Sie, sich dem anzuschließen Spektrum-Forum wenn JavaScript-Tests neu für Sie sind.

Die Bibliothek ermöglicht den Zugriff auf normale DOM-Selektoren, sodass wir dies auch einfach tun können:

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});

Sie müssen die Philosophie dahinter verstehen Reaktionstest-Bibliothek zu verstehen, was man damit machen kann und was nicht;

Das Ziel dahinter Reaktionstest-Bibliothek ist für die Tests, Implementierungsdetails Ihrer Komponenten zu vermeiden und sich stattdessen darauf zu konzentrieren, Tests zu schreiben, die Ihnen das Vertrauen geben, für das sie bestimmt sind.

Das Abfragen von Elementen nach Klassenname ist also nicht mit dem ausgerichtet Reaktionstest-Bibliothek Philosophie, da sie Implementierungsdetails enthält. Der Klassenname ist eigentlich das Implementierungsdetail eines Elements und ist etwas, das der Endbenutzer nicht sieht, und er kann jederzeit im Lebenszyklus des Elements geändert werden.

Anstatt also nach Elementen zu suchen, die der Benutzer nicht sehen kann und die sich jederzeit ändern können, versuchen Sie einfach, nach etwas zu suchen, das der Benutzer sehen kann, z. B. Text, Beschriftung oder etwas, das im Lebenszyklus des Elements konstant bleibt wie Daten-ID.

Um Ihre Frage zu beantworten, ist es nicht ratsam, den Klassennamen zu testen, und daher können Sie dies nicht tun Reaktionstest-Bibliothek. Versuchen Sie es mit anderen Testbibliotheken wie z Enzym oder React-Dom-Test-Dienstprogramme.

Sie können benutzerdefinierte Matcher von testing-library/jest-dom verwenden.

Die @testing-library/jest-dom-Bibliothek bietet eine Reihe benutzerdefinierter Jest-Matcher, mit denen Sie Jest erweitern können. Dadurch werden Ihre Tests aussagekräftiger, klarer zu lesen und zu pflegen.

https://github.com/testing-library/jest-dom#tohaveclass

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

Dies kann global in einem eingerichtet werden setupTest.js Datei

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc

Du solltest benutzen toHaveClass von Jest. Keine Notwendigkeit, mehr Logik hinzuzufügen.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild).toHaveClass(add you className);
//You Can Also You Screen Instead Of Using Container Container Not Recommended To Use As Documentation Said
    expect(screen.getByRole('button')).toHaveClass(add you className)
})

Sie können toHaveClass von jest DOM verwenden

  it('renders textinput with optional classes', () => {
    const { container } = render(<TextArea {...props} className="class1" />)
    expect(container.children[1]).toHaveClass('class1')
  })

Vergessen Sie nicht, die Antwort wie diesen {Container} zu destrukturieren, da React Testing Library standardmäßig ein div erstellt und dieses div an document.body anhängt, und hier wird Ihre React-Komponente gerendert. Wenn Sie über diese Option einen eigenen HTMLElement-Container bereitstellen, wird dieser nicht automatisch an document.body angehängt.

    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
  it('className', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<App />);
    const result = renderer.getRenderOutput();
    expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
  });
});