create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

How can I configure react-scripts jest to mock the return of an endpoint?

Open caio-borghi-yapi opened this issue 3 years ago • 1 comments

I'm trying to use a custom configuration for jest by running this command

react-scripts test -- --config=jest.config.js

jest.config.js
/* eslint-disable no-undef */
module.exports = {
 setupFilesAfterEnv: ['<rootDir>/jestSetup.js'],
 preset: 'ts-jest',
  testEnvironment: 'node',
  transform: {
    '^.+\\.ts?$': 'ts-jest',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
}
jestSetup.js

const { server } = require('./src/app/mocks/api/server')
const AbortController = require('abort-controller')
const { fetch, Headers, Request, Response } = require('cross-fetch')

// Establish API mocking before all tests.
beforeAll(() => {
  server.listen()
})

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())

// Clean up after the tests are finished.
afterAll(() => server.close())

global.fetch = fetch
global.Headers = Headers
global.Request = Request
global.Response = Response
global.AbortController = AbortController

caio-borghi-yapi avatar Sep 14 '22 20:09 caio-borghi-yapi

AFAIK, neither react-scripts nor jest do the network request mocks. Have you tried some third-party libraries like nock or msw?

isqua avatar Sep 15 '22 20:09 isqua