1

I'm completely new to writing test cases.I'm trying to write test case using jest,enzyme/react-testing library.I'm unable to test this component,tets are failing .If anyone can help me to write the test for the below code .Thank you in advance... I have attached the test case as well.If found of mistakes do help me out with it. test case with jest,enzyme or react-library anything is fine .I'm still in learning phase.

header.js
    
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import {
  fetchAsyncMovies,
  fetchAsyncShows,
} from "../../features/movies/movieSlice";
import user from "../../images/user.png";
import "./Header.scss";

const Header = () => {
  const [term, setTerm] = useState("");
  const dispatch = useDispatch();
  const submitHandler = (e) => {
    e.preventDefault();
    if(term==="")return alert("Please enter the search term")
    dispatch(fetchAsyncMovies(term));
    dispatch(fetchAsyncShows(term));
    setTerm("");
  };
  return (
    <div className="header">
      <div className="logo">
        <Link to="/">Movie App</Link>
      </div>
      <div className="search-bar">
        <form onSubmit={submitHandler}>
          <input
            type="text"
            value={term}
            placeholder="Search Movies or Shows"
            onChange={(e) => setTerm(e.target.value)}
          />
          <button type="submit">
            <i className="fa fa-search"></i>
          </button>
        </form>
      </div>
      <div className="user-image">
        <img src={user} alt="user" />
      </div>
    </div>
  );
};

 

export default Header;




Test case.
    import React from "react";
     import Header from "./Header";
    import { shallow } from "enzyme";
     import Enzyme from "enzyme";
     import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
     import * as reactRedux from "react-redux";
    
     Enzyme.configure({ adapter: new Adapter() });
    
   jest.mock("react-redux", () => ({
     ...jest.requireActual("react-redux"),
      useDispatch: jest.fn(),
  }));
    
    describe("Header", () => {
         //mocking useDispatch hook
      beforeEach(() => {
         useDispatchMock.mockImplementation(() => () => {});
     });
      afterEach(() => {
        useDispatchMock.mockClear();
     });
     const useDispatchMock = reactRedux.useDispatch;
    
     
    test("submit handler gets invoked", () => {
        const jsdomAlert = window.alert;  // remember the jsdom alert
     window.alert = () => {};
         const submitHandler = jest
          .fn()
           .mockImplementation((cb) => () => cb({ test: "test" }));
         const wrapper = shallow(
          <Header form="test" submitHandler={submitHandler} />
        );
         const event = { preventDefault: () => {} };
         jest.spyOn(event, "preventDefault");
       wrapper.find("form").simulate("submit", event);
         expect(submitHandler).toHaveBeenCalledTimes(0);
         expect(event.preventDefault).toBeCalled();
        window.alert = jsdomAlert;
     });
      
    });
Veda
  • 11
  • 2

1 Answers1

0

you need wrapper your component with the mock store to avoid crash when useDispatch call

you can use redux-mock-store library

Do it this way

import configureStore from 'redux-mock-store' //ES6 modules
const { configureStore } = require('redux-mock-store') //CommonJS
import { Provider } from 'react-redux'


const middlewares = []
const mockStore = configureStore(middleware)()


 <Provider store={mockStore}>
    < Header />// <your test component 
  </Provider>
Yoel
  • 7,555
  • 6
  • 27
  • 59