Jest: Implement constructor mocking

[haraldrudell]

Request to implement constructor mocking

In #663, there was a clever statement by @cpojer:

…JS doesn't really allow to call the constructor with variadic arguments and a bound context.

However, since ECMAScript 2015, the new operator allows a rest element likeso:

  class C {
    constructor(a) {
      console.log('a', a) // "a 1"
    }
  }

  const args = [1, 2, 3]
  new C(...args)

and if an intermediate constructor returns a value, that is taken to be the object that was constructed.

Constructors do not work with regular mocks, because they require the new operator.

Could we now have some special mock function for constructors?

I wanted to use those in Jest tests, to intercept and extend a ReactJS component being tested
https://github.com/facebookincubator/create-react-app/issues/3482

ie. I want to have the regular code use an AppExtended class that I code up inside the test, a class that extends App when it is run as a test. Maybe it is not possible.

[haraldrudell]

Here’s what I want to Jestify:

Whenever they instantiate App, give’m AppTest, and in particular for the case when App is a default export

import React from 'react'
import ReactDOM from 'react-dom'
import App, * as AppImport from './App'

it('renders without crashing', async () => {
  class AppTest extends App {
    static promise
    componentDidMount(...args) {
      return AppTest.promise = super.componentDidMount(...args)
    }
  }

  const App0 = App
  AppImport.default = AppTest

  const div = document.createElement('div');
  await new Promise((resolve, reject) => ReactDOM.render(<App />, div, resolve))

  // wait for the promise to conclude
  const promise = AppTest.promise
  expect(promise).toBeInstanceOf(Promise, 'Instrumenting App instance failed')
  await promise

  AppImport.default = App0
})

[cpojer]

Thanks for bringing this up. We are dropping node 4 with the next major and I am fine with this change if it makes mocks more solid. Can you work on a pull request? :)

[haraldrudell]

In two weeks or so.

I think you would need to add to the documentation, possibly in the guides section:

• Mocking, Intercepting or extending an ECMAScript class (partially this feature)
• Mocking or Intercepting an ECMAScript class instance method
• Mocking or intercepting a named or default ECMAScript module export

I think you also are missing a section on how use breakpoints in tests with or without Create React App

• Insert debugger statement
• Issue this command
• Browse to chrome://…
  just to let people get started

I would also appreciate a link to the fattest (Facebook) open-source project using Jest the recommended way together with ECMAScript 2017 and ReactJS

I am trying to learn everything that matters about Jest. Then, people will force me to use Karma/Chromium, too.

Having users is a bitch ;)

[orta]

I think you would need to add to the documentation, possibly in the guides section:

Mocking, Intercepting or extending an ECMAScript class (partially this feature)
Mocking or Intercepting an ECMAScript class instance method
Mocking or intercepting a named or default ECMAScript module export

I wonder if a jest mockbook (like a cookbook) repo where there is an individual example for each one of these cases, and more would be useful. ( Wallaby.js does a good example for this though it is per-repo).

Would be a nice reference tool for anyone getting started.

[orta]

would also appreciate a link to the fattest (Facebook) open-source project

Probably https://github.com/facebook/react-native

[Kamshak]

I wonder if a jest mockbook (like a cookbook) repo where there is an individual example for each one of these cases, and more would be useful.

A thousand times this! I've been trying jest a few times and it's always endless browsing of docs, searching github for examples and in the end trying everything from github issues and stackoverflow answers. Big pain!