React - Test separate parent component (without redux)

Question

I wanna test parent component, but I want to do this without redux. I have problem because I've got error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(MarkerList)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(MarkerList)".

My parent component:

export class Panel extends React.Component {
  constructor(props) {

  }

  componentDidUpdate(prevProps) {
   ...
  }

  handleCheckBox = event => {
   ...
  };

  switchPanelStatus = bool => {
    ...
  };

  render() {
   ...
  }
}

const mapDispatchToProps = {
  isPanelSelect
};

export const PanelComponent = connect(
  null,
  mapDispatchToProps
)(Panel);

My child component:

export class MarkerList extends Component {
  constructor(props) {
      ...   
    };
  }

  componentDidMount() {
   ...
  }

  componentDidUpdate() {
   ...
  }

  onSelect = (marker, id) => {
   ...
  }

  render() {
  ...
  }
}

const mapStateToProps = state => ({
  ...
});

const mapDispatchToProps = {
 ...
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MarkerList);

Panel test file:

import '@testing-library/jest-dom'
import "@testing-library/react"
import React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import {Panel} from '../Panel';


test("test1", async () => {

  const isPanelSelect = jest.fn();
  const location = {
    pathname: "/createMarker"
  }

  const {getByText} = render(  <Panel isPanelSelect={isPanelSelect} location={location} />)
})

I've tried set store as props to Panel component or wrap It via Provider in my test file but It doesn't help me.

You can mock the store OR export the component with and without connect. That way you control which props are sent to the component which simplify the test process (without Redux). — Samuel Vaillant

Samuel Vaillant Samuel Vaillant · Accepted Answer · 2020-04-20T14:41:58

react-redux doesn't work without the store. You can either provide it by the context or props (usually in tests). You can provide a mock version in the test. The main problem is that both components require Redux. You have to manually forward the context to the children if it's provided as prop. The alternative solution is to mount your component within a Redux aware tree:

import { Provider } from "react-redux";

test("test1", async () => {
  const { getByText } = render(
    <Provider store={createFakeStore()}>
      <Panel isPanelSelect={isPanelSelect} location={location} />
    </Provider>
  );
});

React - Test separate parent component (without redux)

1 Answers