CODEWITHSUNDEEP
javascriptreactjstestingintegration-testing
Martin
Martin

Reputation: 83

Testing nested components with Jest and snapshot returns null

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);

Upvotes: 3

Views: 4441

Answers (4)

Ram
Ram

Reputation: 65

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>
    );
  });
});

Upvotes: 0

Joao
Joao

Reputation: 2746

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", () => {
   ...
});

Upvotes: 0

snowyBunny
snowyBunny

Reputation: 445

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');

Upvotes: 0

Carr
Carr

Reputation: 2771

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? )

Upvotes: 1

Related Questions