Testing nested components with Jest and snapshot returns null

Question

I am trying to create SelectColumn.test.js similar to Summary.test.js

https://gitlab.com/sosy-lab/software/benchexec/-/blob/SelectColumn.test/benchexec/tablegenerator/react-table/src/tests/SelectColumn.test.js

But unfortunately not successful, I tried all solutions from code forums. But seems I am doing something wrong.

Result: failed

Expected result should be: passed

Error:

react-modal: No elements were found for selector #root.

      180 | 
      181 |   render() {
    > 182 |     ReactModal.setAppElement("#root");
          |                ^
      183 |     return (
      184 |       <ReactModal
      185 |         className="overlay"

Edited on 01.03.2020:

I added <div id="root"> which fixed error:

react-modal: No elements were found for selector #root.

but now new error is showing:

TypeError: parentInstance.children.indexOf is not a function

in code:

      81 |           .create(<Overview data={data} />)
      82 |           .getInstance();
    > 83 |         const component = renderer.create(component_func(overview));
         |                                    ^
      84 | 
      85 |         expect(component).toMatchSnapshot();
      86 |       });

I tried to move ReactModal.setAppElement to componentDidMount but it seems not to be the solution.

Edited on 04.03.2020:

Now I changed my code so it tests from the main component from App.js which works great, but I want to test just the child component SelectColumn. I tried with shallow and find but the snapshot is always exports[...] = null;

import React from "react";
import SelectColumn from "../App.js";
import { test_snapshot_of } from "./utils.js";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

// mock uniqid to have consistent names
// https://stackoverflow.com/a/44538270/396730
jest.mock("uniqid", () => i => i + "uniqid");

const wrapper = shallow(<SelectColumn />);
const rootElement = wrapper.find("#root");
test_snapshot_of("Render SelectColumn", overview => rootElement);

Carr · Accepted Answer · 2020-02-29 09:22:21Z

1

It seems #root is not an element in SelectColumn? but in your test case, you just import SelectColumn and want to do snapshot comparison? So I think React-Modal cannot work correctly in this context, because it cannot find #root element in this testing scope. I think Jest won't make the virtual Dom outside of SelectColumn for this test.

First, I think you can try to wrap a <div id="root"> as the outmost element in the SelectColumn component to verify if the problem is like what I think. If it successes, then maybe you should consider adding this root element to this component, it also makes this component more reusable and decoupled (also I tried to find the #root here, but I cannot find it either, is it at more outside component? )

edited Feb 29, 2020 at 9:22

answered Feb 29, 2020 at 8:29

Carr

2,8012 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martin Over a year ago

unfortunately this is not working for me: react-modal: No elements were found for selector #root. 22 | 23 | componentDidMount() {` > 24 | ReactModal.setAppElement("#root"); | ^ 25 | } 26 | // -------------------------Rendering------------------------- 27 | renderRunSets = () => {

Carr Over a year ago

@Martin, sorry I was careless, this should be a problem of running test, updated the answer, hope it's helpful!

Martin Over a year ago

thanks this error seems to be fixed but now it gives me another error: TypeError: parentInstance.children.indexOf is not a function in line: 83 | const component = renderer.create(component_func(overview));

Carr Over a year ago

@Martin, is this error in the test, too? Did you create an element with id #root? if you did maybe you can try to move your ReactModal.setAppElement to componentDidMountagain, actually it would be better if you create another question and give more info :)

snowyBunny · Accepted Answer · 2020-12-13 12:53:41Z

0

When running the test, the reactModal DOM is not available so by filtering out for test cases, it wont set the #root element on null.

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root');

edited Dec 13, 2020 at 12:53

answered Dec 11, 2020 at 10:36

snowyBunny

4437 silver badges9 bronze badges

2 Comments

Mark Rotteveel Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

snowyBunny Over a year ago

I assumed the code is very self-explanatory. Perhaps I assumed wrong. I shall add some comments on the reply.

Joao · Accepted Answer · 2021-01-18 19:21:05Z

0

Rather than remove the modal for testing, a suggested solution is to move the setAppElement call outside of the testing scope of a project. I had been calling that in a "Modal" wrapper component but instead I moved it out into my entry App.js file (which never really runs for testing).

If you really need to test it though, you can do this:

ReactModal.setAppElement(document.createElement('div'));
describe("test component that uses modal", () => {
   ...
});

answered Jan 18, 2021 at 19:21

Joao

2,7372 gold badges27 silver badges36 bronze badges

Comments

Ram · Accepted Answer · 2021-04-12 11:18:24Z

0

Im my case ContactForm is my component where i'm using model below code helps to get rid of error while tesing

describe("test component that uses modal", () => {
  it('renders without crashing', () => {
    render(
      ReactModal.setAppElement(document.createElement('div')),
      <ContactForm> </ContactForm>
    );
  });
});

answered Apr 12, 2021 at 11:18

Ram

659 bronze badges

Collectives™ on Stack Overflow

Testing nested components with Jest and snapshot returns null

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related