Jest module mocking

[Mikeysauce]

Hello,

I am attempting to write some integration tests, where I wish to mock and modify an API route function that is being imported and called with my page's getServerSideProps. An issue I am facing is my mock is not being used within the page, as it's using webpack require to import the file, which jest is not touching. Having spent several hours today looking at this with some colleagues, I am really not sure how to approach this, but given the widespread adoption of nextjs, we cannot be the first team to have faced this problem?

Here is some pseudo code example of what I am trying to achieve:

pages/index.js

import getName from '../api/name';

const MyPage = (props) => (
  <p>Hello, {props.name}</p>
)

export const getServerSideProps = async (context) => {
  return {
    props: {
      name: getName(context);
    }
  }
}

tests/index.spec.js

import getName from '../../api/name';

jest.mock('../../api/name');

describe('Index page', () => {
  let server;
  beforeEach(() => {
    ...
    server = await makeServerEtc();
  })
  it('Renders the name Foo', async () => {
    getName.mockImplementation(() => 'Foo');
    expect(server.readFromThePage()).toBe('Foo');
  })
})

Any help would be greatly appreciated, as this is quite important for our team to adopting nextjs.

Regards

[Mikeysauce]

Managed to solve this with some jest mocks to override how nextjs is requiring it's webpackified modules:

jest.mock('../.next/server/pages/_document', () =>
  require('../src/pages/_document')
);
jest.mock('../.next/server/pages/_app', () => require('../src/pages/_app'));
jest.mock('../.next/server/pages/index', () => require('../src/pages/index'));