Jest mock not working with React Testing Library

Question

I am using @testing-library/react for testing UI components. Cannot get jest mock working.

It seems it cannot mock the implementation of the exported function getDomElement but actual implementation is called.

Implementation of 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

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.

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

@RootNode I'm facing the same issue. My jest.mock only works when it is in jestsetup.js. When I move the same to a test file it doesn't work. It only started to happen when I moved to @testing-library/react — Vishal Sharma
– Vishal Sharma, Commented Mar 24, 2021 at 6:53

Ankur Marwaha · Accepted Answer · 2021-03-02 09:45:23Z

4

Doing following two thing, got it working for me.

Adding __esModule:true fixed this issue for me.

jest.mock('module',()=>({ __esModule: true, default: jest.fn() }));
Moving the mocking part before the describe. (Just after the imports.)

//moving it to before the describe -> jest.mock(...); describe('', ...);

Hope this helps somebody.

edited Mar 2, 2021 at 9:45

answered Mar 2, 2021 at 9:40

Ankur Marwaha

1,9252 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian · Accepted Answer · 2020-10-09 07:47:59Z

2

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

answered Oct 9, 2020 at 7:47

Christian

7,8925 gold badges42 silver badges66 bronze badges

4 Comments

anmatika Over a year ago

For some reason having the same error: TypeError: Cannot read property 'clientWidth' of null

Christian Over a year ago

Could you add the code for getDomElement and Table?

anmatika Over a year ago

Sure, getDomElement and Table implementations have now been added.

Christian Over a year ago

But where are you using getDomElement? In ThemeProvider? If so, please add the code for it too.

Ally · Accepted Answer · 2024-01-19 01:04:04Z

I know this was 3 years ago, but if anyone is still having the same problem (with Typescript) I was able to fix it.

So the problem happens when you add import '@testing-library/react-native/extend-expect'; to setupJest file along with a jest.mock.

According to the documentation, you can use setupFilesAfterEnv as an alternative for the import. Add the bellow to your package.json:

"setupFilesAfterEnv": ["@testing-library/react-native/extend-expect"]

Now it'll work but Typescript is still complaining about some expect functions. Now we'll trick typescript into thinking everything is ok.

Create a second file called setupTestingLibrary.ts and add the import there. Typescript will think this file is being used and will read the types.

In my case, the setupJest.ts file is in root directory. You should create the second file in the same directory as setupJest, but if that doesn't work try creating both at root dir.

Hope it helps.

Collectives™ on Stack Overflow

Jest mock not working with React Testing Library

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related