Test execution with Jest and Context-CodePudding

I want to perform a test of a button that executes a function called deleteEmployee() but the problem that occurs to me is that when I execute the test it gives me the following error.

Error

  ● Employees Component › should execute deleteEmployee (it has interacion with context) when click button

    TypeError: Cannot destructure property 'employees' of '((cov_2ati4da0re(...).s[3]  ) , (0 , _react.useContext)(...))' as it is undefined.

       6 |     const navigate = useNavigate();
       7 |     const params = useParams();
    >  8 |     const {employees, setEmployees} = useContext(EmployeesContext);
         |            ^
       9 |
      10 |     const deleteEmployee = (id) => {
      11 |         setEmployees(employees.filter(({dni}) => dni !== id))

Function

const deleteEmployee = (id) => {
        setEmployees(employees.filter(({dni}) => dni !== id))
}

Test

  it("should execute delete employee function when click button", () => {
    const wrapper = mount(
      <EmployeesContext.Provider>
        <Employees />
      </EmployeesContext.Provider>
    );
    const button = wrapper.find("button").first();
    button.simulate("click");
    expect(button.props().onClick).toBeDefined();
  });

In my context I only have defined a basic code and an initial definition with some default values.

Context declaration

import React, { useState } from 'react';
import { Header } from './components/Header';
import { EmployeesContext } from './context/EmployeesContext';
import { AppRouter } from './router/AppRouter';
import { BrowserRouter as Router} from 'react-router-dom'

function App() {
  const [employees, setEmployees] = useState([
    {
      name: "Jaime Armando Straus",
      address: "Los Angeles, CA",
      dni: "MBJ34368V12P5",
      birth: "19/03/1998",
      phone: "5628903455",
      email: "[email protected]",
      position: "Front-end Developer"
    },
    {
      name: "Jose Armando Straus",
      address: "Washington, DC",
      dni: "NFIN3543543NKBN",
      birth: "19/03/1980",
      phone: "5628903455",
      email: "[email protected]",
      position: "Back-end Developer"
    }
  ]);

  return (
    <EmployeesContext.Provider value={{employees, setEmployees}}>
      <Router>
        <div className="app">
          <Header />
          <AppRouter />
        </div>
      </Router>
    </EmployeesContext.Provider>
  );
}

export default App;

Context Code

import { createContext } from "react";

export const EmployeesContext = createContext(null);

CodePudding user response：

You need provide a value to the provider in your test, something like the following:

it("should execute delete employee function when click button", () => {
  const mockEmployees = [];
  const mockSetEmployees = jest.fn();
  const wrapper = mount(
    <EmployeesContext.Provider value={{ mockEmployees, mockSetEmployees }}>
      <Employees />
    </EmployeesContext.Provider>
  );
  const button = wrapper.find("button").first();
  button.simulate("click");
  expect(button.props().onClick).toBeDefined();
});