» »

Testiranje React aplikacije z jest in react-testing-library

Testiranje React aplikacije z jest in react-testing-library

echoper ::

Pozdravljeni,

Naredil sem osnovno React aplikacijo, ki sem jo dobil za preizkus. Zdaj bi rad aplikacijo stestiral, ampak imam težave.

Trenutno bi rad stestiral onClick dogodek na gumbu komponente ItemList. Ob kliku se spremeni stanje showCreate v komponenti Item. To stanje pa določa, če naj se komponenta ItemCreate pokaže ali ne. Test bi moral pokazati, da se ItemCreate pravilno prikaže v DOM-u brskalnika.

V sami aplikaciji to deluje. Pri testu pa se mi zatakne, ko hočem sprožiti klik na ta gumb. Ko poženem test, mi zadnja vrstica vrže error, da ne najde primernega elementa.

(Item komponenta)
class Item extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCreate: false,
    };

    this.handleShowCreate = this.handleShowCreate.bind(this);
  }

  handleShowCreate(e) {
    e.preventDefault();
    const { showCreate } = this.state;
    this.setState({ showCreate: !showCreate });
  }

  render() {
    const { showCreate } = this.state;

    return (
      <div>
        {showCreate && <ItemCreate />} // V tej komponenti imam v root div-u nastavljen atribut: data-testid="showItemCreate"
        <ItemtList handleShowCreate={this.handleShowCreate} /> // Ta handler potem vežem na <button> element z onClick dogodkom
      </div>
    );
  }
}

export default Item;


(setupTests.js)
import 'jest-dom/extend-expect'
import 'react-testing-library/cleanup-after-each'


(test s katerim imam težave)
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import ItemList from './ItemList';

test('renders without crashing', () => {
  const { getByText, getByTestId } = render(<ItemList />);

  // getByText('Create New Items');

  /*
  fireEvent(
    getByText('Create New Items'),
    new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
    }),
  );
  */

  fireEvent.click(getByText('Create New Items')); // do sem še je vse vse vredu (ne vrže nobene napake)

  // getByText('Create item'); // te tri zadnje vrstice vržejo error, da ne najde elementa
  // getByTestId('showItemCreate');

  expect(getByTestId('showItemCreate')).toBeInTheDocument();


Kako dosežem, da zadnja vrstica v testu ne bo vrgla napake?

Matek ::

Ne delam prav dosti z Reactom, tako da tole je malo tipanje v temi, ampak na prvi pogled izgleda, da imaš težavo, ker se test izvaja sinhrono in tvoj element, kot pravi error, še ne obstaja. V resnici bi po simuliranem kliku moral počakati, da react opravi re-render in šele nato iskati svoj element. Kolikor gledam dokumentacijo za react-testing-library, obstaja helper ravno za ta namen: waitForElement.
Bolje ispasti glup nego iz aviona.

echoper ::

Zna biti, da je to. Sicer sem enkrat že poizkusil z waitForElement, pa mi ni šlo. Bom jutri še enkrat preveril.

echoper ::

Sem preveril na hitro z waitForElement, pa ne gre. Ne izklučujem možnosti, da je vseeno lahko to problem, ampak nimam zdaj časa več, pa se bom kasneje vrnil na problem.

Sem pa dodal propTypes h komponentam in mi test suit javlja, da komponenta nima nobenega zahtevanega "prop-a", ki imajo veze s prikazom ItemCreate. Mislim, da je to srž problema. Moram si poglejati kako to naredim.

Nevem, če lahko preprosto importam Item komponento, kjer so definirani ti "prop-i" in jih podam k ItemList, ali moram komponento/"prop-e" ponovno definirati v testu kot na primer tukaj: https://github.com/kentcdodds/react-tes... .

echoper ::

Ta del mi zdaj dela. Moral sem 'zrenderirat' parent komponento (Item). Dela z in brez awaitForElement().


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

[Java]Shranjevanje/Branje nastavitev za povezavo z podatkovno bazo

Oddelek: Programiranje
191191 (965) KernelPanic
»

[android] vstavljanje slike

Oddelek: Programiranje
7651 (548) messi
»

MySQL Relacije

Oddelek: Izdelava spletišč
6669 (435) mkos2
»

[visual C#] Na drugem računalniku se ne zažene

Oddelek: Programiranje
12949 (779) Beezgetz
»

razložitev nekaterij elementov v visual studio 05

Oddelek: Programiranje
71235 (1040) darkolord

Več podobnih tem