Jest, React testing a component not exist

Question

I have this test:

const rendered = render(
  <TransactionReason
    reason={{ code: defaultReason }}
  />
);

expect(rendered.getByTestId('reasonInput')).toBeNull();

What I'm trying to do is: there is a component that has the testID = 'reasonInput', but this component is not rendered when the reason prop has that value that I'm giving (code: defaultReason). But I get an error because Jest can't find that id, of course, is not rendered. I thought that that would produce a false or null value, that's why I tried with toBeNull or toBeFalsy or something like that.

How could I then test the not existance of that component?

Estus Flask Estus Flask · Accepted Answer · 2020-09-23T07:29:38

As the reference states, the difference between getByTestId and queryByTestId is that the former throws an error if there is no matching element:

getBy* queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found (use getAllBy instead).

queryBy* queries return the first matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use queryAllBy instead).

It should be:

expect(rendered.queryByTestId('reasonInput')).toBeNull();

Jest, React testing a component not exist

1 Answers