Блог

Я пытаюсь выполнить тест высокого уровня, в котором я запускаю:

 describe("<App/>", () => {
  let wrapper;
  const setState = jest.fn();
  const useStateSpy = jest.spyOn(React, "useState");
  useStateSpy.mockImplementation((init) => [init, setState]);

  beforeEach(() => {
    wrapper = mount(<App />);
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it("updates components in state when an option is clicked", () => {

    act(() => {
      wrapper
        .find(".component-options__component-option")
        .at(1)
        .simulate("click");
    });

    expect(setState).toHaveBeenCalledWith({
      ...testComponents,
      [componentType.SCREEN]: "15-retina",
    });
  });
});

 

Который действует на компонент, возвращающий следующее:

     <li className={"component-options__component-option"} onClick={click} key={item.name}>
      <span className="component-option__name">{item.name}</span>
      <span className="component-option__price">£{item.price}</span>
    </li>
 

click опора здесь успешно вызывает функцию в приложении, которая представляет собой несколько уровней li компонента в моей иерархии компонентов. Я знаю, потому что это обновляет мой пользовательский интерфейс! По какой-то причине, хотя при попытке реализовать и протестировать ту же логику в тестовой среде мне говорят:

   ● <App/> › updates components in state when an option is clicked

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: {"cpu": "quad-i7-27-base", "graphics": "rad-pro-455", "memory": "8gb-mem", "screen": "15-retina", "storage": "512-ssd"}

    **Number of calls: 0**

      45 |     });
      46 | 
    > 47 |     expect(setState).toHaveBeenCalledWith({
         |                      ^
      48 |       ...testComponents,
      49 |       [componentType.SCREEN]: "15-retina",
      50 |     });

      at Object.<anonymous> (src/__tests__/App.test.js:47:22)

 

Таким образом, либо мой клик не регистрируется (я перепробовал несколько других методов выполнения этого клика), либо я пропускаю шаг для правильного обновления компонентов? Я не уверен.