包含useRouteMatch的React組件的單元測驗

具有以下組件：

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useRouteMatch, Link } from 'react-router-dom';

interface MyComponentProps {
  myId?: string;
  link?: string;
}

export const MyComponent: React.FunctionComponent<MyComponentProps> = ({
  myId = 'default-id',
  link,
  children
}) => {
  const [myOutlet, setMyOutlet] = useState<HTMLOListElement>();
  const match = useRouteMatch();

  useEffect(() => {
    const outletElement = document.getElementById(myId) as HTMLOListElement;
    if (outletElement) {
      setMyOutlet(outletElement);
    }
  }, [myId]);

  if (!myOutlet) {
    return null;
  }

  return createPortal(
    <li>
      <Link to={link || match.url}>{children}</Link>
    </li>,
    myOutlet
  );
};

export default MyComponent;

我想使用 React 測驗庫為它撰寫單元測驗，問題是它因為 useRouteMatch 不斷拋出錯誤。

這是我的代碼：

import { render, screen } from '@testing-library/react';

import { MyComponent } from './my-component';

describe('MyComponent', () => {
  const testId = 'default-id';
  const link = '/route';
  it('should render MyComponent successfully', () => {
    const element = render(<MyComponent myId={testId} link={link} />);
    expect(element).toBeTruthy();
  });
});

錯誤出現在帶有 的行const match = useRouteMatch();，有沒有辦法將這部分包含在測驗中？

uj5u.com熱心網友回復：

你應該使用<MemoryRouter>：

將<Router>您的“URL”的歷史記錄保存在記憶體中（不讀取或寫入地址欄）

使用initialEntriesprops在歷史堆疊中提供模擬位置。

然后，使用<Route>組件在其路徑與當前 URL 匹配時呈現一些 UI。

下面的例子，假設瀏覽器當前歷史堆疊中的位置路徑名是/one，<Route>的pathprop也是/one，兩者匹配，渲染MyComponent。

例如

my-component.tsx：

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useRouteMatch, Link } from 'react-router-dom';

interface MyComponentProps {
  myId?: string;
  link?: string;
}

export const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myId = 'default-id', link, children }) => {
  const [myOutlet, setMyOutlet] = useState<HTMLOListElement>();
  const match = useRouteMatch();
  console.log('match: ', match);

  useEffect(() => {
    const outletElement = document.getElementById(myId) as HTMLOListElement;
    if (outletElement) {
      setMyOutlet(outletElement);
    }
  }, [myId]);

  if (!myOutlet) {
    return null;
  }

  return createPortal(
    <li>
      <Link to={link || match.url}>{children}</Link>
    </li>,
    myOutlet
  );
};

export default MyComponent;

my-component.test.tsx：

import React from 'react';
import { render, screen } from '@testing-library/react';

import { MyComponent } from './my-component';
import { MemoryRouter, Route } from 'react-router-dom';

describe('MyComponent', () => {
  const testId = 'default-id';
  const link = '/route';
  it('should render MyComponent successfully', () => {
    const element = render(
      <MemoryRouter initialEntries={[{ pathname: '/one' }]}>
        <Route path="/one">
          <MyComponent myId={testId} link={link} />
        </Route>
      </MemoryRouter>
    );
    expect(element).toBeTruthy();
  });
});

測驗結果：

 PASS  examples/70077434/my-component.test.tsx (8.433 s)
  MyComponent
    ? should render MyComponent successfully (46 ms)

  console.log
    match:  { path: '/one', url: '/one', isExact: true, params: {} }

      at MyComponent (examples/70077434/my-component.tsx:13:11)

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |    87.5 |    28.57 |     100 |   86.67 |                   
 my-component.tsx |    87.5 |    28.57 |     100 |   86.67 | 18,26             
------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.951 s, estimated 9 s

包版本：

"react": "^16.14.0",
"react-router-dom": "^5.2.0"

標籤：javascript 反应 打字稿 单元测试 反应测试库

上一篇：斷言表中某行的值

下一篇：為什么不在forEach作業中重新分配引數元素