queryByText() error

[serggin]

Versions

"react": "16",
"react-native": "0.61.4",
"react-native-testing-library": "^1.11.1",
"react-test-renderer": "16.9.0"

Description

The "doc" says:

queryBy
queryBy* queries returns the first matching node for a query, and return null if no elements match. This is useful for asserting an element is not present.

But in my test there must be 2 matching nodes. I am expecting the first one, but receive an error

Error: Expected 1 but found 2 instances

Reproducible Demo

test('test3 Text content', () => {
const mock = {
content: 'Some test content',
content2: 'Another test content',
typo: 'testo',
};
const component = () => (

{mock.content2}
{mock.content}

);
const {queryAllByText, queryByText} = render(component());

const q1 = queryByText('content');
expect(q1).toBeNull();
const q2 = queryByText(/content/);
expect(q2).not.toBeNull();
const q3 = queryAllByText(/content/);
console.log(q3.length);
expect(q3.length).toBe(2);

});

[thymikee]

Can you setup a repro we can download?

[serggin]

Hello, Michał Pierzchała!

You've written:

Can you setup a repro we can download?

Do you mean repository? Here you are:

https://github.com/serggin/jestRNTL_Demo.git

Best regards, Serggin.

[thymikee]

Yes, "repro" is a jargon for "repository with a reproduction of the issue". Thanks!

[MattAgn]

Is anyone currently working on this issue? Otherwise I'm willing to give it a try!

[thymikee]

Feel free to triage it and take it :)

[MattAgn]

Thanks!

Here's what I found:

• the queryBy methods use the getBy methods
• the getBy methods use the find methods from react-test-renderer
• the find methods expect only one instance as shown in the findByProps function below (extracted from react-test-renderer)

_proto.findByProps = function findByProps(props) {
  return expectOne(
    this.findAllByProps(props, {
      deep: false,
    }),
    'with props: ' + JSON.stringify(props)
  );
};

function expectOne(all, message) {
  if (all.length === 1) {
    return all[0];
  }

  var prefix =
    all.length === 0
      ? 'No instances found '
      : 'Expected 1 but found ' + all.length + ' instances ';
  throw new Error(prefix + message);
}

A possible solution would be to use the getAllBy methods in the getBy methods and return only the first element found, what do you think?

[thymikee]

I'll have a look at this next week, sorry to keep you waiting 😅

[MattAgn]

Haha no problem 😄

[MattAgn]

Any news @thymikee? 😃

[thymikee]

Unfortunately not yet, busy traveling :< I would appreciate sending a PR to our test suite with a failing test :)

[thymikee]

Ok, finally had some time to have a look at that. It's intended behavior. If you expect more than 1 element to be present, use queryAllByText. That's an API decision we derive from React Testing Library. However now I see we miss an important bit in the documentation, which is:

This throws if more than one match is found (use queryAllBy instead).

Will add that shortly.

@MattAgn appreciate your willingness to help resolve the issue. Looking forward to seeing more of your contributions :)

[MattAgn]

Thanks @thymikee! I'll try my best :)