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.
Source: stackoverflow.com
Related Query
- React Testing Library's waitFor not working
- Jest + React Testing Library: waitFor is not working
- fireEvent.keyDown not working as expected on my Jest + React Testing Library test
- React testing library fireEvent.click not working
- getByRole query for paragraph not working during React testing
- Jest/Enzyme shallow testing React stateless component - wrapper.find() not working
- Enzyme / Karma / Webpack / Jasmine / React testing not working
- React testing with Jest : Destructuring assignment not working
- testing a react form with pure Jest library (no enzyme) not working
- React jest testing onSubmit by simulate not working
- React testing with Hooks not working on State Update
- Cleanup method is not working in react testing library
- onKeyDown event not working on divs in React
- React colspan not working
- React router private routes / redirect not working
- proxy not working for react and node
- lodash debounce in React functional component not working
- React Router v4 routes not working
- React Router v4 Redirect not working
- onclick function is not working in react native application
- react typescript testing TypeError: MutationObserver is not a constructor
- onClick not working React js
- React npm start not working : 'No version of chokidar available'
- Scroll View inside view not working react native
- React app not working in Internet Explorer 11
- Lodash debounce not working in React
- React create app hot reload is not always working on linux
- React native textDecoration properties not working on Android
- Using 'ref' on React Styled Components is not working
- Create React App not working
More Query from same tag
- How do you mock an argument being passed into wrapper.instance().method in jest/enzyme?
- React-Bootstrap Modals cause problems for window EventListener
- How can I get my Navbar to display at the top of the page?
- Filter and map over updated array and render in table
- Failing to apply material ui overrides in storybook in React app
- Add onClick event to a group element (svg) with react
- Material UI Avatar component sizes not changing
- How can I display a modal after a delay?
- React-router sub-path rendering not firing the right component
- Pass variable from input to GraphQL search call
- Why I got this error: npm ERR! code ELIFECYCLE
- React & Redux : simple async login
- How to make useSelector() work (basic setup)?
- React Component does not re-render on context change with useContext
- React-beautiful-dnd typescript compiler issues
- What is causing Semantic-UI-React elements to break my basic Reactjs App?
- consuming from context provider returns element type is invalid
- Jest gives an error: "SyntaxError: Unexpected token export" for node_modules\@microsoft\mgt-react
- fork with map function in Redux Saga
- React component not render anything, except after I refresh page
- State is undefined when simulating click in react component test
- pass graphql data from parent to child in gatsby.js
- How to push data feed to Dashboard to be able create charts on it in react-admin?
- Prismic embedded url for a video does not load
- React and ReactDOM undefined but installed
- Increase timeout time in React - neo4j app
- Using Promise.reject() in async/await catch handler
- how to add token to header in reactjs
- Infinite loop through array of strings in React
- Rendering in react with array.map