0

When I render a component in it block everything works as expected.

  it("when user inputs more characters it displays suggestions", async () => {
    const { getByLabelText, findByText } = render(<Component />);

    debug();
  });

It's not a good practice though. I prefer using it only for assertions. When I do:

  describe("when user inputs more characters ", async () => {
    const { getByLabelText, findByText } = render(<Component />);

    it("displays suggestions", () => {
      debug();
    });
  });

debug shows only <body /> and all queries fails in it block.

What am I doing wrong or why this is not supported?

mazikwyry
  • 197
  • 1
  • 10

1 Answers1

0

They both work, the problem is that you must put your render inside the it block. That's because you can't reuse a rendered component

Giorgio Polvara - Gpx
  • 12,268
  • 5
  • 53
  • 55
  • This is ok for this simple example. In most cases though you need to setup a test case and perform some actions. It is a good practice to separate those sections (given, when, then). In jest, most people use `beforeEach`. What if you would like to do something like this: https://gist.githubusercontent.com/mazikwyry/c5db71fcd9afca9c80fbe40b459f0082/raw/992ee91f25ce952c557280804c82020dc740ba85/gistfile1.txt – mazikwyry Sep 30 '19 at 14:06
  • You can move the _before_ logic in a `setup` function and call it at the beginning of your `it` blocks – Giorgio Polvara - Gpx Sep 30 '19 at 15:06