“翻译不是一个功能”-反应管理与反应测试库和笑话的反应错误

Question

我正在尝试使用 React 测试库和 Jest 编写测试。 但是，我收到TypeError: translate is not a function错误。 正如React Admin Documentation所建议的那样，我正在使用useTranslate挂钩。 在测试中，我使用jest.mock function 来模拟“react-admin”package，目前所有的测试都是检查组件是否呈现。 所有依赖项都已更新。

现在，测试在使用 useTranslate 挂钩的 translate const 上阻塞。 我尝试以与jest.mock相同的方式将translate添加到useTranslate ，但没有骰子。 我还做了一个console.log(typeof translate)来证明它实际上是一个 function，它返回了function 。 关于我可以/应该做什么来通过考试有什么建议吗？

这是我的代码：

// in src/admin/Organization/OrganizationShow.tsx

import * as React from 'react';
import {
  useTranslate,
  Show,
  Tab,
  TabbedShowLayout,
  TextField,
  DateField,
} from 'react-admin';
import { HeaderTitle } from '../../components';

export const OrganizationShow = (props: any) => {
  const translate = useTranslate();

  return (
    <Show {...props} title={<HeaderTitle i18n="show.title" />}>
      <TabbedShowLayout>
        <Tab label={translate('show.details')}>
          <TextField source="name" label={translate('data.name')} />
          <DateField source="started" label={translate('data.started')} />
          <DateField
            source="ended"
            label={translate('data.ended')}
            emptyText="-"
          />
        </Tab>
        <Tab label={translate('show.apps')} path="apps">
          <p>{translate('page.not_yet')}</p>
        </Tab>
        <Tab label={translate('show.authentication')} path="auth">
          <p>{translate('page.not_yet')}</p>
        </Tab>
      </TabbedShowLayout>
    </Show>
  );
};

// in src/__tests__/Organization.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import { OrganizationShow } from '../admin/Organization/OrganizationShow';

// Mock React Admin so we don't have to resolve it
// Do not take this into account for the example
// The tests are valid if react-admin package is installed
jest.mock('react-admin', () => ({
  useTranslate: (key: string) => key,
  Show: () => <div />,
  Tab: () => <div />,
  TabbedShowLayout: () => <div />,
  TextField: () => <div />,
  DateField: () => <div />,
}));

// Suppress PropTypes warning by default
const defaultProps = {
  location: {},
  match: {},
};

describe('OrganizationShow', () => {
  it('App renders successfully', () => {
    render(<OrganizationShow {...defaultProps} />);
  });
});

FAIL src/__tests__/Organization.test.tsx
  OrganizationShow
    ✕ App renders successfully (91 ms)

  ● OrganizationShow › App renders successfully

    TypeError: translate is not a function

      17 |     <Show {...props} title={<HeaderTitle i18n="show.title" />}>
      18 |       <TabbedShowLayout>
    > 19 |         <Tab label={translate('show.details')}>
         |                     ^
      20 |           <TextField source="name" label={translate('data.name')} />
      21 |           <DateField source="started" label={translate('data.started')} />
      22 |           <DateField

// in package.json
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^13.0.16",
    "@types/jest": "^26.0.22",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.4.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest-junit": "^12.0.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0",
    "react-test-renderer": "^17.0.2",
    "typescript": "^4.2.3"
  }

Answer 1

useTranstale钩子返回 function，所以你的模拟版本应该是这样的：

useTranslate: () => (key: string) => key,