New install not working with Jest

[snaptopixel]

Hi, thanks for all the hard work! I've been following the guides but getting errors trying to use Mirage in Jest/StencilJS

When I invoke createServer it raises this error:
TypeError: Cannot read properties of undefined (reading 'prototype')

With the following stack trace:

      at interceptor (node_modules/pretender/dist/pretender.js:1543:46)
      at new Pretender (node_modules/pretender/dist/pretender.js:1641:32)
      at PretenderConfig._create (node_modules/miragejs/lib/mock-server/pretender-config.js:242:14)
      at PretenderConfig.create (node_modules/miragejs/lib/mock-server/pretender-config.js:72:27)
      at Server.config (node_modules/miragejs/lib/server.js:193:24)
      at new Server (node_modules/miragejs/lib/server.js:133:10)
      at createServer (node_modules/miragejs/lib/server.js:98:10)
      at startMirage (src/mocks/server.ts:5:22)

The error in pretender stems from the fact that it's trying to read:
if (ctx.pretender._nativeXMLHttpRequest.prototype._passthroughCheck) {

Which is set earlier as:
this._nativeXMLHttpRequest = self.XMLHttpRequest;

And self.XMLHttpRequest is not defined since I'm in Node

[cah-brian-gantzler]

Pretender does not work in node. This makes mirageJS (when using pretender) only available to run in a browser.

You can use try to use mirage-msw. This is experimental at this time. Pretender will still be included in your builds, as it has not yet been removed from miragejs and made an optional dependency.

If you would like to user mirage-msw add it to your package.json, then in your server import and add the following (talked about in this issue #1013). Would be interested in any feedback to eventually get this to be part of MirageJS proper.

import { Server } from 'miragejs';
import MswInterceptor from 'mirage-msw';

new Server({
   // your config options
   interceptor: new MswInterceptor(),
});

[snaptopixel]

Thanks @cah-brian-gantzler, I guess I'm confused? The docs have info on Jest and unit testing which I assumed meant it would work in JSDom?

[cah-brian-gantzler]

If you read the comparison page is does say that MirageJS only works in the browser. Could you tell me where in the docs it talks about Jest?

The tests for this package does use jest, and Im wondering if that is what you are seeing. The unit tests are testing this package, not using this package in another application. All those tests are running in the browser.

[snaptopixel]

@cah-brian-gantzler sorry for the delay in responding, the tutorial walks through using it with Jest:
https://miragejs.com/tutorial/part-9/

[IanVS]

@snaptopixel Are you using jsdom, if so, what version?

[nemonemi]

I am experiencing the same issue, and my JSDOM version is v20.0.3.
My application was set up a year ago and hasn't been touched, except for the miragejs version being updated by the bot.

[cah-brian-gantzler]

@cah-brian-gantzler sorry for the delay in responding, the tutorial walks through using it with Jest: https://miragejs.com/tutorial/part-9/

I do see where it says it is already setup for Jest, although Jest isnt really mentioned til the last tutorial. Looking in the package.json I did not see where the tutorial was actually using jest as its test runner. It was using Craco

 "scripts": {
    "start": "craco start",
    "start:final": "REACT_APP_DEMO=true yarn start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Looking at Craco it seems to be something specific to react, so not sure if you could use it in your application. Given that react is also a web application, craco must be doing something to make Jest run in the web instead of node. You may need to research Craco more to see what it is actually doing to allow Jest to run the way you would like it to.

Im sorry I dont have any react experience. The only time I have ever used Jest is the mirage tests, but that was established before I started using the MirageJS library. I know how to run them 😄 , but not completely knowledgable in how they actually work or are configured.