类型错误：无法读取未定义的属性“位置”（开玩笑）

Question

I have a simple component that uses useLocation hook from 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();
  });
});

// Update App.test.js (with jest mock)

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();
  });
});

Could you please tell me how I can fix this? Thanks.

Answer 1

Just move your jest.mock declaration to the top of the file and it should work:

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();
  });
});

Answer 2

In case, anybody else faces a similar problem.

There were 2 issues with my approach. First, I used mock inside describe (thanks Johnny and MGarcia to help me figure that out).

However, I got another error after I moved mock code. Error: React.createElement: type is invalid — expected a string

That was my another Jest newbie mistake, and forgot that it's all JavaScript under the hood. With this approach, the side effect of mocking useLocation is rest of the methods from react-router-dom are made unavailable.

This is the approach that worked for me:

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

Final solution:

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

The problem is that you need to specify that you are using es6 module syntax. Try this:

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();
  });
});

Reference.