How to snapshot test connected component that wrapped with connected component?

Viewed 376

I need to ask about testing React using enzyme and jest. The case is I have a redux connected component wrapped by also connected component.

wrapper.js

import React from "react";
import { connect } from "react-redux";

import { state, actions } from "src/services/common-store/user";

function ApplicationLayout(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <div id="content">
        {props.children}
      </div>
    </div>
  );
}

export default connect(state, actions)(ApplicationLayout);

User.js

import React from "react";
import { connect } from "react-redux";

import { state, actions } from "src/services/common-store/user";
import ApplicationLayout from './ApplicationLayout';

function User(props) {
  return (
    <ApplicationLayout>
      <h1>{props.user.name}</h1>
      <img src={props.user.img} />
    </ApplicationLayout>
  );
}

export default connect(state, actions)(User);

in my test file, I already provided Provider with redux mock store.

User.test.js

import React from "react";
import { mount } from "enzyme";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";
import toJson from "enzyme-to-json";
import thunk from "redux-thunk";
import User from "./User.js";

// Mocking Redux store
const mockStore = configureMockStore([thunk]);
const store = mockStore({ title: "Application Layout", user: { name: "andri", img: "https://ava.com/img.jpg" } });

const setup = () => {
  return mount(
    <Provider store={store}>
      <User />
    </Provider>
  );
};

describe("Test Component", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = setup();
  });

  describe("Components rendering", () => {
    it("Should render without error and match snapshot", () => {
      expect(toJson(wrapper)).toMatchSnapshot();
    });
  });
});

but I keep getting error said that props like title and user are undefined TypeError: Cannot read property 'user' of undefined. what can I do to address this?

0 Answers
Related