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

Question

我有一个简单的组件，它使用 React Router 的 useLocation 钩子。

// 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（使用 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();
  });
});

你能告诉我如何解决这个问题吗？谢谢。

Answer 1

只需将您的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();
  });
});

Answer 2

万一其他人也面临类似的问题。

\n\n

我的方法有两个问题。首先，我在描述中使用了模拟（感谢约翰尼和姆加西亚帮助我解决这个问题）。

\n\n

但是，在移动模拟代码后，我遇到了另一个错误。错误：React.createElement: type is invalid \xe2\x80\x94 expected a string

\n\n

这是我的另一个 Jest 新手错误，忘记了它的底层都是 JavaScript。使用这种方法，模拟 useLocation 的副作用是其余方法react-router-dom不可用。

\n\n

这是对我有用的方法：

\n\n

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

\n\n

最终解决方案：

\n\n

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

\n

Answer 3

问题是您需要指定您正在使用 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();
  });
});

参考。