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

Question

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

Roo*_*ode 6 javascript mocking jestjs react-testing-library

我用于@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>,
    );
  })
})

Run Code Online (Sandbox Code Playgroud)

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;

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

测试结果为：

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

TypeError: Cannot read property 'clientWidth' of null

Answer 1

Chr*_*ian 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>,
    );
  })
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，4 月前
查看次数：	7084 次
最近记录：	2 年，1 月前