Ошибка типа: невозможно прочитать свойство 'location' из неопределенного (шутка)

Question

У меня есть простой компонент, который использует ловушку useLocation от React Router.

// App.jsx

import React from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const pathName = location.pathname;
  useEffect(() => {
    // Use pathName here
  }, [pathName]);
}

// App.test. js

import App from './App';

describe('App component', () => {
  it('Renders correctly', () => {
    const wrapper = shallow(<App />);

    expect(wrapper).toMatchSnapshot();
  });
});

// Обновление App.test. js (с шуткой)

import App from './App';

describe('App component', () => {
  jest.mock('react-router-dom', () => ({
    useLocation: jest.fn().mockReturnValue({
      pathname: '/another-route',
      search: '',
      hash: '',
      state: null,
      key: '5nvxpbdafa',
    }),
  }));

  it('Renders correctly', () => {
    const wrapper = shallow(<App />);

    expect(wrapper).toMatchSnapshot();
  });
});

Подскажите, пожалуйста, как я могу это исправить? Спасибо.

Answer 1

Проблема в том, что вам нужно указать, что вы используете синтаксис модуля es6. Попробуйте это:

import App from './App';



jest.mock('react-router-dom', () => ({
    __esModule: true,
    useLocation: jest.fn().mockReturnValue({
      pathname: '/another-route',
      search: '',
      hash: '',
      state: null,
      key: '5nvxpbdafa',
    }),
  }));

describe('App component', () => {
  it('Renders correctly', () => {
    const wrapper = shallow(<App />);

    expect(wrapper).toMatchSnapshot();
  });
});

Ссылка.

Answer 2

В случае, если кто-то еще сталкивается с подобной проблемой.

С моим подходом было 2 проблемы. Сначала я использовал макет из описания (спасибо Джонни и М.Г. Ошибка: React.createElement: type is invalid — expected a string

Это была моя очередная ошибка Jest newb ie, и я забыл, что все это JavaScript под капотом. При таком подходе побочным эффектом насмешливого useLocation является то, что остальные методы из react-router-dom становятся недоступными.

Это подход, который работал для меня:

https://github.com/facebook/jest/issues/936#issuecomment -265074320

Окончательное решение:

function mockFunction() {
  const original = require.requireActual('react-router-dom');
  return {
    ...original,
    useLocation: jest.fn().mockReturnValue({
      pathname: '/another-route',
      search: '',
      hash: '',
      state: null,
      key: '5nvxpbdafa',
    }),
  };
}

jest.mock('react-router-dom', () => mockFunction());

Answer 3

Просто переместите объявление jest.mock в начало файла, и оно должно работать:

import App from './App';

jest.mock('react-router-dom', () => ({
    useLocation: jest.fn().mockReturnValue({
      pathname: '/another-route',
      search: '',
      hash: '',
      state: null,
      key: '5nvxpbdafa',
    }),
}));

describe('App component', () => {
  it('Renders correctly', () => {
    const wrapper = shallow(<App />);

    expect(wrapper).toMatchSnapshot();
  });
});