Hi everyone,
I am trying to write tests for my application using React Testing Library, and jest . I wanted to test a component that encloses a JsonForms element and I realized that even with the simplest test (like the one I am showing here) the only rendered thing is an empty div.
I am quite new to testing, especially with React, so my issue may be trivial, sorry if this is the case.
I tried to learn from tests in the JSONForms repo, but I didn’t managed to obtain different results than rendering empty divs.
Here is a very simple example of failing test
test('JsonForms simple test', () => {
const schema = {
type: 'object',
properties: {
firstName: {
type: 'string',
title: 'First Name',
},
},
};
const data = { firstName: 'John' };
render(
<JsonForms
data={data}
schema={schema}
renderers={materialRenderers}
/>
);
expect(screen.getByText(/First Name/i)).toBeInTheDocument()
});
for which the result is:
TestingLibraryElementError: Unable to find an element with the text: /First Name/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div />
</body>
111 | />
112 | );
> 113 | expect(screen.getByText(/First Name/i)).toBeInTheDocument()
| ^
114 | });
115 |
116 | const schema = {
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
at Object.<anonymous> (src/__test__/copied.test.tsx:113:19)
My test assertion could also be wrong, the point here is that nothing is rendered.
I would like to avoid using enzyme being not mantained anymore if possible.
I hope that you could help me, thanks in advance!