Jest 模拟无法与 React 测试库一起使用

Question

我正在使用

@testing-library/react

来测试 UI 组件。无法让笑话模拟工作。

似乎无法模拟导出函数的实现

getDomElement

，但实际的实现被调用。

Table.test.js 的实现

describe('Table', () => {
  jest.mock('../../../../commonHelpers/getDomElement.js', () => {});

  it('it renders columns', () => {
    render(
      <ThemeProvider>
        <Table
          columns={columns}
          data={data}         
        />
      </ThemeProvider>,
    );
  })
})

Table.js的实现

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import {
  useTable,
  useSortBy,
  useBlockLayout,
  useResizeColumns,
  usePagination,
} from 'react-table';

import { TableStyled as Table, TableContainer } from './styled';
import Pagination from './Pagination';
import Head from './Head';
import Body from './Body';
import TableContext from './TableContext';

const Table = ({
  columns,
  data,
  onChangeSort,
  fetchData,
  pageCount: calculatedPageCount,
  initialPageSize,
}) => {
  const tableInstance = useTable(
    {
      columns,
      data,
      manualSortBy: true,
      disableSortRemove: false,
      manualPagination: true,
      pageCount: calculatedPageCount,
      initialState: { pageIndex: 0, pageSize: initialPageSize },
    },
    useSortBy,
    useBlockLayout,
    useResizeColumns,
    usePagination,
  );

  const {
    getTableProps,
    state: { pageIndex, pageSize },
  } = tableInstance;


  useEffect(() => {
    fetchData({ pageIndex, pageSize });
  }, [fetchData, pageIndex, pageSize]);

  return (
    <TableContext.Provider value={tableInstance}>
      <TableContainer>
        <Table {...getTableProps()}>
          <Head onChangeSort={onChangeSort} />
          <Body />
        </Table>
      </TableContainer>
      <Pagination />
    </TableContext.Provider>
  );
};

Table.propTypes = {
  columns: PropTypes.array,
  data: PropTypes.array,
  onChangeSort: PropTypes.func,
  fetchData: PropTypes.func,
  pageCount: PropTypes.number,
  initialPageSize: PropTypes.number,
};

export default Table;

getDomElement.js 的实现，通过给定的 id 返回 dom 元素。

export default function getDomElement(id) {
  return document.getElementById(id);
}

测试结果：

const width = getDomElement('project-list').clientWidth;

TypeError: Cannot read property 'clientWidth' of null

Answer 1

做了以下两件事，让它对我有用。

添加

__esModule:true

为我解决了这个问题。

jest.mock('module',()=>({ __esModule: true, default: jest.fn() }));

将模拟部分移至描述之前。（就在导入之后。）

//移至描述之前 ->
```
jest.mock(...); describe('', ...);
```

希望这对某人有帮助。

Answer 2

试试这个：

import * as myModule from '../../../../commonHelpers/getDomElement';
describe('Table', () => {
  jest.spyOn(myModule, "getDomElement").mockImplementation(() => {});
  it('it renders columns', () => {
    render(
      <ThemeProvider>
        <Table
          columns={columns}
          data={data}         
        />
      </ThemeProvider>,
    );
  })
})

Jest 模拟无法与 React 测试库一起使用

问题描述投票：0回答：2

2个回答

最新问题

Jest 模拟无法与 React 测试库一起使用

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2