CODEWITHSUNDEEP
javascripttestingenzyme
Code-Apprentice
Code-Apprentice

Reputation: 83597

Configuring Enzyme 3.x Adapter

I am writing tests for a React app using Jest and Enzyme. Enzyme 3.x introduced Adapters to provide compatibility across different versions of React. The installation documentation gives examples how to set this up:

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

What is this "setup file" referred to in the comment? Is this a file which can be run before all tests? Where does this file go in a React project? Does it need a particular name?

Upvotes: 3

Views: 991

Answers (6)

Yilmaz
Yilmaz

Reputation: 49749

With enzyme 3 we need an adapter. Adapter allows us to specify exactly which version of react we are gonna test against. This allows core enzyme library to be smaller. It does not need to have all of the code for all of the various versions of react that supported. Instead you just specify which one you need by installing the adapter that keeps the core library light and keeps your entire code base more manageable.

this is how u configure it:

in tests directory create any .js file:

tests/setupTest.js

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

in the root directory create jest.config.json file and put this

{
  "setupFiles": ["raf/polyfill", "<rootDir>/src/tests/setupTest.js"],
}

NOTE: We also need to install a polyfill module. Polyfill is known as request animation frame. Since we do not have it in test environment, we need to install. 

 npm i raf --save

finally in package.json :

"test": "jest --config=jest.config.json"

Upvotes: 0

PatrickOlvera
PatrickOlvera

Reputation: 101

I was just having this same issue and the easiest solution was to simply create a file named exactly setupTests.js, in the src/ directory with the contents:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Jest automatically detects it and the error goes away.

Upvotes: 0

Anupam Maurya
Anupam Maurya

Reputation: 2241

Jest & enzyme configuration : Add following code in package.json

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

For setup of Enzyme => setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

For setupTestFrameworkScriptFile : setupTests.js global.fetch = require('jest-fetch-mock')

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

Upvotes: 0

ralfting
ralfting

Reputation: 213

What is this "setup file" referred to in the comment? : It's a way of running something before your test starting (some config for instance)

If you create your React Project using react-create-app you need or eject your application or pass a command set up your file setupTest.js (The name does not matter), but you need to identify in your command line, like this:

package.json

"scripts": {
  "test": "react-scripts test --env=jsdom --setupFiles=./src/test-setup.js",
},

test-setup.js

import './shim';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

shim.js (this is a hack to avoid the warning)

global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};

Upvotes: 1

Phillip Thomas
Phillip Thomas

Reputation: 1479

Enzyme has a nifty guide on setup here: https://github.com/airbnb/enzyme/blob/master/docs/guides/jest.md

Though the initial step doesn't say it is the package.json.

Posting the relevant sections (with some minor tweaks) here so we don't lose it:

Configure with Jest

To run the setup file to configure Enzyme and the Adapter with Jest direct setupTestFrameworkScriptFile to literally the string <rootDir> and the path to your setup file.

package.json:

{
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>src/setupTests.js"
  }
}

Jest version 15 and up

Starting with version 15, Jest no longer mocks modules by default. Because of this, you no longer have to add any special configuration for Jest to use it with enzyme.

Install Jest, and its Babel integrations, as recommended in the Jest docs. Install enzyme. Then, simply require/import React, enzyme functions, and your module at the top of a test file.

setupTests.js:

import React from 'react';
import { shallow, mount, render } from 'enzyme';

import Foo from '../Foo';

Upvotes: 1

AKX
AKX

Reputation: 169416

It doesn't need a particular name, and yes, it's run before any tests are.

You hook it up in your package.json's jest stanza.

This is an example from a project I'm working on.

  "jest": {
    // other stuff...
    "setupFiles": [
      "./js/jest-setup.js"
    ],
    // ....
   }

The actual js/jest-setup.js file looks like this (i.e. like your example).

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Upvotes: 5

Related Questions