Question

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

现在，测试阻塞在带有 useTranslate 钩子的 translate const 上。我尝试以与 translate 相同的方式将 jest.mock 添加到 useTranslate，但没有骰子。我还做了一个 console.log(typeof translate) 来证明它实际上是一个返回 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"
  }

'translate is not a function'-react admin 与 react 测试库和 jest 中的错误

0 个答案: