I’m not sure what wrapper is in this case. But to answer your two questions: yes it’s possible to get by HTML element and no, it’s not advisable. This is how you would do it: // Possible but not advisable const { container } = render(<MyComponent />) // `container` is just a DOM node const … Read more
I feel like none of the answers really gave a complete solution, so here it is: const result = render(<SomeComponent />); const someElement = result.container.querySelector(‘#some-id’);
Updated answer: Please refer to @mikaelrs comment below. No need for the waitFor or waitForElement. You can just use findBy* selectors which return a promise that can be awaited. e.g await findByTestId(‘list’); Deprecated answer: Use waitForElement is a correct way, from the docs: Wait until the mocked get request promise resolves and the component calls … Read more
Assert if button is disabled You can use the toHaveAttribute and closest to test it. import { render } from ‘@testing-library/react’; const { getByText } = render(Click); expect(getByText(/Click me/i).closest(‘button’)).toHaveAttribute(‘disabled’); or toBeDisabled expect(getByText(/Click me/i).closest(‘button’)).toBeDisabled(); Assert if button is enabled To check if the button is enabled, use not as follows expect(getByText(/Click me/i).closest(‘button’)).not.toBeDisabled();
Jest uses jsdom to run its test. jsdom is simulating a browser but it has some limitations. One of these limitations is the fact that you can’t change the location. If you want to test that your link works I suggest to check the href attribute of your <a>: expect(screen.getByText(‘Click Me’).closest(‘a’)).toHaveAttribute(‘href’, ‘https://www.test.com/’)
You need to change the value of DEBUG_PRINT_LIMIT env variable (default is 7000). For example, run your tests with: DEBUG_PRINT_LIMIT=10000 yarn test Source: https://github.com/testing-library/dom-testing-library/blob/master/src/pretty-dom.js#L33
toBeInTheDocument is not part of RTL. You need to install jest-dom to enable it. And then import it in your test files by: import ‘@testing-library/jest-dom’
You can easily do that with react-testing-library. First, you have to understand that container or the result of getByText etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser. So, if you want to know what class is applied to container.firstChild you can just do … Read more
From DOM Testing-library Docs – Appearance and Disappearance Asserting elements are not present The standard getBy methods throw an error when they can’t find an element, so if you want to make an assertion that an element is not present in the DOM, you can use queryBy APIs instead: const submitButton = screen.queryByText(‘submit’) expect(submitButton).toBeNull() // … Read more