getByText() failing in most basic use case, need help

[jkoutavas]

Okay, so I'm brand new to react-native-testing as of this morning and have not been able to do something as simple as do getByText(). So, I'm not going to claim this issue is a bug with the library, but a "bug" with my basic understanding of how to use it. Please help me see what I'm missing? Thanks.

Given this jest test file in my React Native 0.67.2 app:

import React from 'react';
import { Text } from 'react-native';
import { cleanup, render, RenderAPI } from '@testing-library/react-native';

describe('react-native-test example', () => {
  let c: RenderAPI;

  beforeEach(() => {
    c = render(<Text>example</Text>);
  });

  afterEach(cleanup);

  test('getByText()', () => {
    c.debug();
    expect(c.getByText('example')).toBeDefined();
  });
});

Why do I get this result?

I also tried <Text>{'example'}</Text> and getByText(/example/) to no avail.

Versions:

    "react": "~17.0.2",
    "@testing-library/jest-native": "^4.0.4",
    "@testing-library/react-native": "^9.0.0",
    "jest": "^25.1.0",

[jkoutavas]

I ended up solving it like so:

import React from 'react';
import { Text } from 'react-native';
import { cleanup, render, RenderAPI } from '@testing-library/react-native';
import '@testing-library/jest-native/extend-expect';

describe('react-native-test example', () => {
  let c: RenderAPI;

  beforeEach(() => {
    c = render(<Text testID="test">example</Text>);
  });

  afterEach(cleanup);

  test('getByText()', () => {
    c.debug();
    expect(c.getByTestId('test')).toHaveTextContent('example');
  });
});

Did I need to go this far?

[thymikee]

Nah, it should work. Are you sure you have the same exact version of react and react-test-renderer?

[jkoutavas]

Nah, it should work. Are you sure you have the same exact version of react and react-test-renderer?

I'm using react and react-test-renderer v17.0.2.

[jim-at-jibba]

Any movement on this. I am experiencing the same. Using the same versions as above.

[clrnd]

I'm having the same issue 🤔, debug() shows the element is there but no ByText query finds it 🤷

[AugustinLF]

Any way you could produce a repo we could check out? Because we have tests for cases like that, so it definitely works in general.

[clrnd]

Managed to get a small case failing here:

https://github.com/clrnd/react-native-testing-library-example-bug

yarn run v1.22.18
$ jest
  console.log
    <View>
      <RCTScrollView>
        <View>
          <View>
            <Text>
              Example
            </Text>
          </View>
        </View>
      </RCTScrollView>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)

 FAIL  src/App.test.tsx
  App
    ✕ Lel (1416 ms)

  ● App › Lel

    Unable to find an element with text: Example

      10 |
      11 |     debug();
    > 12 |     const btn = await findByText('Example');
         |                       ^
      13 |
      14 |     expect(btn).toBeInTheDocument();
      15 |   });

      at findByText (node_modules/@testing-library/react-native/build/helpers/makeQueries.js:95:14)
      at _callee$ (src/App.test.tsx:12:23)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at invoke (node_modules/regenerator-runtime/runtime.js:155:20)
      at node_modules/regenerator-runtime/runtime.js:190:11
      at tryCallTwo (node_modules/promise/lib/core.js:45:5)
      at doResolve (node_modules/promise/lib/core.js:200:13)
      at new Promise (node_modules/promise/lib/core.js:66:3)
      at callInvokeWithMethodAndArg (node_modules/regenerator-runtime/runtime.js:189:16)
      at AsyncIterator.enqueue (node_modules/regenerator-runtime/runtime.js:212:13)
      at AsyncIterator.next (node_modules/regenerator-runtime/runtime.js:119:21)
      at Object.<anonymous>.exports.async (node_modules/regenerator-runtime/runtime.js:239:14)
      at Object._callee (src/App.test.tsx:8:13)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

[mdjastrzebski]

I've done some quick research based on repro repo, by adding console.logs to node_modules of RNTL and found that the culprit is this line which returns this object when logged to console.log:

{
    act: [Getter],
    cleanup: [Getter],
    fireEvent: [Getter],
    flushMicrotasksQueue: [Getter],
    render: [Getter],
    shallow: [Getter],
    waitFor: [Getter],
    waitForElement: [Getter],
    waitForElementToBeRemoved: [Getter],
    within: [Getter],
    getQueriesForElement: [Getter],
    getDefaultNormalizer: [Getter]
}

Which looks like our own export! I've checked that require('react-native') is returning the same object (===) as require('@testing-library/react-native')

@thymikee , @AugustinLF any idea what might happening?

[mdjastrzebski]

I was able to make the test pass. Require changes:

1. In jest.config.js L23: moduleDirectories: ['node_modules', './'], => moduleDirectories: ['node_modules'], <-- This the culprit of messing the imports
2. In App.test.tsx L14: expect(btn).toBeInTheDocument(); => expect(btn).toBeTruthy();. There is no concept of document in RNTL.

@clrnd Overall your setup in repro repo is quite strange, e.g. using testEnvironment: "jsdom", "jsx": "react" for tests, moduleDirectories mentioned above.

@thymikee, @AugustinLF Seems like we need some good example project for typescript.

[clrnd]

Thanks a lot @mdjastrzebski !

What changes would you make to the setup? Like what would a "correct" value be for testEnvironment be?

[thymikee]

@clrnd node or any custom env that's based on node and not JSDOM. We expect the tests are running in a pure Node.js env, no need for overhead here

[AugustinLF]

@mdjastrzebski I've created a small ts based repo when doing repro, but perhaps we should consider pushing one under the callstack org? https://github.com/AugustinLF/repro-rntl