我正在使用 @testing-library/react用于测试 UI 组件。无法让 Jest 模拟工作。
似乎无法模拟导出函数的实现 getDomElement但是调用了实际的实现。
Table.test.js 的实现
describe('Table', () => {
jest.mock('../../../../commonHelpers/getDomElement.js', () => {});
it('it renders columns', () => {
render(
<ThemeProvider>
<Table
columns={columns}
data={data}
/>
</ThemeProvider>,
);
})
})
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;
export default function getDomElement(id) {
return document.getElementById(id);
}
const width = getDomElement('project-list').clientWidth;TypeError: Cannot read property 'clientWidth' of null
最佳答案
尝试这个:
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>,
);
})
})
关于javascript - Jest 模拟不适用于 React 测试库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64275415/