Issues with Create-React-App

[HoltMansfield]

TypeError: jest.requireActual is not a function

at td.mock (node_modules/testdouble-jest/index.js:13:28)

The instance of jest that gets passed to testdouble has the following signature:

{
addMatchers: [Function: addMatchers],
autoMockOff: [Function: disableAutomock],
autoMockOn: [Function: enableAutomock],
clearAllMocks: [Function: clearAllMocks],
clearAllTimers: [Function: clearAllTimers],
deepUnmock: [Function: deepUnmock],
disableAutomock: [Function: disableAutomock],
doMock: [Function: mock],
dontMock: [Function: unmock],
enableAutomock: [Function: enableAutomock],
fn: [Function: bound fn],
genMockFn: [Function: bound fn],
genMockFromModule: [Function: genMockFromModule],
genMockFunction: [Function: bound fn],
isMockFunction: [Function: isMockFunction],
mock: [Function: mock],
resetAllMocks: [Function: resetAllMocks],
resetModuleRegistry: [Function: resetModules],
resetModules: [Function: resetModules],
runAllImmediates: [Function: runAllImmediates],
runAllTicks: [Function: runAllTicks],
runAllTimers: [Function: runAllTimers],
runOnlyPendingTimers: [Function: runOnlyPendingTimers],
runTimersToTime: [Function: runTimersToTime],
setMock: [Function: setMock],
spyOn: [Function: bound spyOn],
unmock: [Function: unmock],
useFakeTimers: [Function: useFakeTimers],
useRealTimers: [Function: useRealTimers]
}

Steps to reproduce:

Create a react app with create-react-app

Install testdouble-jest and configure as described in the docs.

Try to use replace as:

let bar, subject
describe('td.replace', () => {
beforeEach(() => {
bar = td.replace('./bar')
subject = require('./foo')
})

I'd be interested in helping out with this but it almost seems like there would need to be a whole separate library for this. Something like testdouble-jest-for-cra

[searls]

As a non-CRA, non-Jest user can you help me understand a bit why Jest is different under CRA than independently?

[davemo]

Hi @HoltMansfield, could you post your test helper file where you are including testdouble-jest so we can see the invocation context?

[HoltMansfield]

@davemo my pleasure

/* eslint import/no-extraneous-dependencies: "off" */
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import {createSerializer} from 'enzyme-to-json'

import mockLocalStorage from '../test/mockLocalStorage'

// setup enzyme to work with React 16
configure({ adapter: new Adapter() })

// setup enzyme as teh default serializer
expect.addSnapshotSerializer(createSerializer({mode: 'deep'}))

// mock local localStorage
mockLocalStorage()

global.td = require('testdouble')
require('testdouble-jest')(td, jest)

[HoltMansfield]

Here is what all gets installed in node_modules from CRA

[HoltMansfield]

requireActual is not actually inside the jest package

[davemo]

Looks to me like you haven't imported jest anywhere in your helper, so in effect it seems like require('testdouble-jest')(td, jest) is passing jest as undefined.

[HoltMansfield]

It's definitely not undefined. When I console.log it I get the output from my original post. Let me try again to explicitly import jest. I did that earlier today but it was in the middle of trying a million things.

[HoltMansfield]

`/* eslint import/no-extraneous-dependencies: "off" */
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import {createSerializer} from 'enzyme-to-json'
import jest from 'jest'

// setup enzyme to work with React 16
configure({ adapter: new Adapter() })

// setup enzyme as teh default serializer
expect.addSnapshotSerializer(createSerializer({mode: 'deep'}))

global.td = require('testdouble')
require('testdouble-jest')(td, jest)`

Results in a different error:

TypeError: jest.mock is not a function

  at td.mock (node_modules/testdouble-jest/index.js:11:30)
  at jestModule (node_modules/testdouble/lib/replace/jest-module.js:19:5)
  at Object.<anonymous>.exports.default (node_modules/testdouble/lib/replace/module.js:10:109)
  at Object.<anonymous>.exports.default [as replace] (node_modules/testdouble/lib/replace/index.js:9:29

I'm extremely appreciative of your time gentlemen. I sincerely hope I'm not just doing something stupid. :)

[HoltMansfield]

requireActual isn't in any of the jest packages...seems to get tacked on by require?

[searls]

git-grep pointed me to the fact jest.requireActual was added in August 2017 via this PR jestjs/jest#4260

[searls]

(I haven't looked into this further yet)

[HoltMansfield]

@searls I'm sorry I didn't point out earlier that CRA is behind on jest. They're on 20.0.4

I installed the latest jest and everything blows up so it seems it doesn't work with CRA.

This may be yet another reason to make my own webpack config.

[searls]

The people who maintain CRA should talk to the people who maintain Jest!

[searls]

@davemo the reason jest is not undefined is because Jest runs each test in a vm and assigns jest to the nebulous module scope which effectively makes it a global from the perspective of everything invoked by the test.

I'm suddenly seeing an entire weekend spent on this flash before my eyes.

[HoltMansfield]

@davemo please hit me up if I can help. I love using testdouble. I'm available all weekend.

[searls]

According to this response, CRA should be out in a few weeks and (at least somebody) expects it to remedy this situation https://twitter.com/lgandecki/status/969877478335500288

requireActual & requireMock were quite necessary to getting testdouble-jest to work, so I'd advise you to upgrade or to lobby for a CRA upgrade path (one hopes there is one planned)

[venikx]

I tested it and yes, test-double seems to work on the CRA@next branch. However the CRA@next branch is rather unstable and is currently broken due to something related to Babel.
It was fun though, working with testdouble ^^

[HoltMansfield]

Awesome! Thanks @AnaRobynn