Testiranje React aplikacije z jest in react-testing-library

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?

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

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