How to use createTranspilingRequire method in Jest

I'll share the solution I finally went with, which is the same adopted by React team but on small scale.

I added a special npm script to run my unit tests against each compiled bundle with a different Jest configuration for each bundle:

{
    "test:bundles": "jest --config ./jest/es.config.js && jest --config ./jest/lib.config.js && jest --config ./jest/dist.config.js"
}

Each Jest configuration file extends default Jest configuration and declares a moduleNameMapper object plus a rootDir property like:

// jest/lib.config.js
const pkg = require('../package.json');

module.exports = Object.assign({}, pkg.jest, {
  rootDir: '../',
  moduleNameMapper: {
    '/src/index$': '<rootDir>/lib/index', // path of "CommonJS" bundle
  },
});

moduleNameMapper will make sure that the same tests used for source code will run against an exported bundle since Jest will transform the import statements on runtime like:

import myLibrary from './src/index';
// transformed into:
import myLibrary from '../lib/index';

The only point to pay attention to is making tests import statements needing remapping easily recognizable by moduleNameMapper regex.

If import from './index' is not unique enough in test the files, it might be rewritten as import from '../src/index'.

If you have Babel in your stack, you can fix this in the right way using babel-jest

Just do npm i --save-dev babel-jest and in your jest settings file add:

"moduleNameMapper": {
  "^.+\\.(css|less|scss)$": "babel-jest"
}

Your playSound function will never throw, because you're swallowing the exception.

you simply need this:

it('fails to play sound with no method arguments', async () => {
  const consoleSpy = jest
    .spyOn(console, 'error')
    .mockImplementation(() => {});
    playSound();
    expect(consoleSpy).toHaveBeenCalled();
});

you can also check return value of the function call, which will be exception object.

Also if you want to check if function throws you can use

expect(function() { playSound(); }).toThrow();

but this will fail, unless you don't catch the exception or rethrow.

jest.spyOn(window.localStorage.__proto__, 'setItem'); works with nothing else at all needed, as noted here: https://github.com/facebook/jest/issues/6798#issuecomment-440988627

So I was able to resolve this. The assumption that it works without any config changes is wrong. First you need to add few more packages added. Below is my updated package.json

{
  "name": "js-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-dropzone": "^4.2.9",
    "react-scripts": "1.1.4",
    "react-test-renderer": "^16.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "jest-enzyme": "^6.0.0",
    "jsdom": "11.10.0",
    "jsdom-global": "3.0.2"
  }
}

Also I removed --env=jsdom from the test script. As I was not able to make it work with that combination

After that you need to create a src/setupTests.js, which is load globals for your tests. This where you need to load jsdom and enzyme

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
import 'jsdom-global/register'; //at the top of file , even  , before importing react

configure({ adapter: new Adapter() });

After that your tests would error out with below error

/Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/jsdom-js-demo/node_modules/react-scripts/scripts/test.js:20
  throw err;
  ^

ReferenceError: FileReader is not defined

The issue seems to be that FileReader should referred with a window scope. So you need to update it like below

const reader = new window.FileReader()

And then run the tests again

Now the tests work fine

Here is a solution Create a jest.config.js and add the following content

• jest.config.js

module.exports = {
    collectCoverage: true,
    coverageReporters: [
        "html"
    ]
};

And in package.json:

"scripts": {
    "test": "jest --watchAll"
}

You can handle multiple conditions in the .mockImplementation() callback:

jest.mock('axios')

axios.get.mockImplementation((url) => {
  switch (url) {
    case '/users.json':
      return Promise.resolve({data: [{name: 'Bob', items: []}]})
    case '/items.json':
      return Promise.resolve({data: [{id: 1}, {id: 2}]})
    default:
      return Promise.reject(new Error('not found'))
  }
})

test('should fetch users', () => {
  return axios.get('/users.json').then(users => expect(users).toEqual({data: [{name: 'Bob', items: []}]}))
})

test('should fetch items', () => {
  return axios.get('/items.json').then(items => expect(items).toEqual({data: [{id: 1}, {id: 2}]}))
})

Are you using any other eslint plugins? If so, has npm warned you of any peer dependency issues?

I ran into this same issue when upgrading to eslint v8.0.1. In may case, one plugin I listed an an earlier version of @typescript-eslint/eslint-plugin as a direct dependency (@typescript-eslint/eslint-plugin is also a peer dependency of eslint-plugin-jest). This earlier version of @typescript-eslint/eslint-plugin was not compatible with eslint v8.0.1. So I opted to downgrade to v7.32.0

If you have control over the other plugins you use, you might upgrade their dependencies and publish a new release. Else, you'll probably have to downgrade eslint in your project.

There are a few mistakes in your provided code:

1. You should not be using DOM element's style property because React does not manage it. Shift the hidden property into the state instead.

2. I believe headerStyle is a shallow copy of the style object. After you simulate click, it does not get updated. You will have to query the element again for the style object.

3. to.have.property is not valid Jest syntax. It should be toHaveProperty.

Please refer to the corrected code here. If you paste the following into create-react-app, it should just work.

app.js

import React, { Component } from 'react';

function Header(props) {
  return <h1 style={props.style}>Header</h1>;
}

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

export class TestButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hiding: false };
  }

  render() {
    return (
      <div>
        <Header
          id="please-hide-me"
          style={{
            display: this.state.hiding ? 'none' : '',
          }}
        >
          Please Hide Me
        </Header>
        <Button
          onClick={() => {
            this.setState({
              hiding: !this.state.hiding,
            });
          }}
        >
          Sample Toggle
        </Button>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <TestButton />
      </div>
    );
  }
}

export default App;

app.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import { TestButton } from './App';

it('renders without crashing', () => {
  const wrapper = shallow(<TestButton />);
  expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
    'display',
    '',
  );
  wrapper.find('Button').simulate('click');
  expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
    'display',
    'none',
  );
});