score:0

for those who are using jest-expo preset which breaks this functionality you need to modify the jest-expo preset to include the code from testing-library/react-native

/* eslint-disable @typescript-eslint/no-var-requires */
const { mergedeepright } = require("ramda");
const jestexpopreset = require("jest-expo/jest-preset");
const testinglibrarypreset = require("@testing-library/react-native/jest-preset");

/*
 * modify the existing jest preset to implement the fix of @testing-library/react-native to get the
 * async waitfor working with modern timers.
 */
jestexpopreset.setupfiles = [
  testinglibrarypreset.setupfiles[0],
  ...jestexpopreset.setupfiles,
  testinglibrarypreset.setupfiles[testinglibrarypreset.setupfiles.length - 1],
];
module.exports = mergedeepright(jestexpopreset, {
  testresultsprocessor: "jest-sonar-reporter",
  modulefileextensions: ["js", "jsx", "ts", "tsx", "yml"],
  modulepathignorepatterns: ["<rootdir>/lib/"],
  globals: {
    "ts-jest": {
      babelconfig: "./babel.config.js",
    },
  },
});

score:4

i had an issue similar to this when i was setting up testing for a test application. the way i fixed this issue was to force re-render the component.

in this case your code would look something like:

import {render, screen} from "@testing-library/react";

describe('parentcomponent', () => {
  test('renders childcomponent on button click', async () => {

    const {rerender} = render(<parentcomponent />);
    userevent.click(screen.getbytestid('show-child'));

    rerender(<parentcomponent />)
    await (waitfor(() => screen.getbytext('text rendered by child')));
  });
});

i hope this works for you. also to be noted that you can use the screen export from the react testing library. it seems like there should be a way to do this automatically, but i haven't been able to find it.

adding link to the rerender docs: https://testing-library.com/docs/react-testing-library/api/#rerender

score:8

it's specified within the documentation. waitfor documentation

function waitfor<t>(
  callback: () => t | promise<t>,
  options?: {
     container?: htmlelement
     timeout?: number //this is 1000ms. change timeout here.
     interval?: number
     ontimeout?: (error: error) => error
     mutationobserveroptions?: mutationobserverinit
  }
): promise<t>

//for 3 seconds.
await (waitfor(() => screen.getbytext('text rendered by child'),{timeout:3000}));

the default timeout is 1000ms which will keep you under jest's default timeout of 5000ms.

score:14

i found the answer here: react testing library - using 'await wait()' after fireevent

tldr: "you can not use wait with getby*. getby is not async and will not wait." better is to use findby*. this is the async version of getby.


Related Query

More Query from same tag