Jest mock 不与 React 测试库一起使用

Question

I am using @testing-library/react for testing UI components.我正在使用@testing-library/react来测试 UI 组件。 Cannot get jest mock working.无法开玩笑地模拟工作。

It seems it cannot mock the implementation of the exported function getDomElement but actual implementation is called.它似乎无法模拟导出的 function getDomElement的实现，但调用了实际实现。

Implementation of Table.test.js Table.test.js 的实现

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

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

Implementation of Table.js 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;

Implementation of getDomElement.js which returns the dom element by given id. getDomElement.js 的实现，它通过给定的 id 返回 dom 元素。

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

Test results in:测试结果在：

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

TypeError: Cannot read property 'clientWidth' of null

Answer 1

Try this:试试这个：

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>,
    );
  })
})

Answer 2

Doing following two thing, got it working for me.做以下两件事，让它为我工作。

Adding __esModule:true fixed this issue for me.添加__esModule:true为我解决了这个问题。
jest.mock('module',()=>({ __esModule: true, default: jest.fn() }));
Moving the mocking part before the describe.在描述之前移动 mocking 部分。 (Just after the imports.) （就在进口之后。）
//moving it to before the describe -> jest.mock(...); describe('', ...); // 将其移动到描述之前 -> jest.mock(...); describe('', ...); jest.mock(...); describe('', ...);

Hope this helps somebody.希望这对某人有帮助。

Jest mock 不与 React 测试库一起使用

问题描述

2 个解决方案

解决方案1
2 2020-10-09 07:47:59

解决方案2
2 2021-03-02 09:40:14

Jest mock 不与 React 测试库一起使用

问题描述

2 个解决方案

解决方案1 2 2020-10-09 07:47:59

解决方案2 2 2021-03-02 09:40:14

解决方案1
2 2020-10-09 07:47:59

解决方案2
2 2021-03-02 09:40:14