4

我正在测试不应该在本地运行并且需要模拟的功能window.location.href：

const usePageTracking = (): void => {
  const location = useLocation();

  useEffect(() => {
    if (!window.location.href.includes("localhost")) {
      ReactGA.initialize("UA-000000-01");
      ReactGA.pageview(window.location.pathname + window.location.search);
    }
  }, []);
};

在我的测试中：

describe("usePageTracking", () => {
  it("initializes ReactGA", () => {
    render(<Example />);
    expect(ReactGA.initialize).toHaveBeenCalled();
  });

  it("tracks page view", () => {
    render(<Example />);
    expect(ReactGA.pageview).toHaveBeenCalledWith("/");
  });
});

注意：关于 Vue 有一个相关的问题，但我不清楚这些解决方案是否也适用于 React（有些只是不起作用）。

4

2 回答 2

5

我在 React 16 和 Jest 24 上得到了以下结果。

describe("usePageTracking", () => {
  let location;
  const mockLocation = new URL("https://example.com");

  beforeEach(() => {
    location = window.location;
    mockLocation.replace = jest.fn();
    // You might need to mock other functions as well
    // location.assign = jest.fn();
    // location.reload = jest.fn();
    delete window.location;
    window.location = mockLocation;
  });

  afterEach(() => {
    window.location = location;
  });

  // ...
});

也可以看看：

于 2020-08-14T08:45:55.223 回答
4

用于Object.defineProperty()定义window.location.

例如

usePageTracking.ts：

import { useEffect } from 'react';

export const usePageTracking = (): void => {
  useEffect(() => {
    console.log(window.location.href);
  }, []);
};

Example.tsx：

import React from 'react';
import { usePageTracking } from './usePageTracking';

export function Example() {
  usePageTracking();
  return <div>example</div>;
}

Example.test.tsx：

import React from 'react';
import { Example } from './Example';
import { render } from '@testing-library/react';

describe('Example', () => {
  it('should pass', () => {
    Object.defineProperty(window, 'location', {
      get() {
        return { href: 'stackoverflow.com' };
      },
    });
    render(<Example />);
  });
});

测试结果

 PASS  examples/63409476/Example.test.tsx (11.048 s)
  Example
    ✓ should pass (39 ms)

  console.log
    stackoverflow.com

      at examples/63409476/usePageTracking.ts:5:13

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.768 s

包版本：

"jest": "^26.6.3",
"ts-jest": "^26.4.4",

jest.config.js：

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
}
于 2021-05-01T04:42:01.460 回答