Enzyme: Use enzyme for specific tests in react-native

Created on 26 Mar 2019 · 23Comments · Source: enzymejs/enzyme

Hello,

Currently we have basic tests with react-test-renderer as well as tests with@storybook/addon-storyshots

if I globally activate enzyme with jest:

"setupFilesAfterEnv": [
   "<Rootdir> /test/setup-enzyme.ts"
]

The snapshots of my stories will not work anymore and throw this error:

 ● Test suite failed to run

    testStorySnapshots is intended only to be used inside jest

      1 | import initStoryshots from "@storybook/addon-storyshots"
      2 | 
    > 3 | initStoryshots({
        |               ^
      4 |   configPath: "./storybook",
      5 |   framework: "react-native",
      6 | })

      at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/api/index.js:37:11)
      at Object.<anonymous> (test/tests/storyshots.test.ts:3:15)

I was wondering if it was possible to activate enzyme on demand, in a beforeAll() for example.

Thanks for reply.

docs help wanted

Source

loic-lopez

All 23 comments

Sure, "activating" enzyme is just configuring an adapter - but I'm not sure why that error would happen. Are you sure that any setupFilesAfterEnv isn't causing that? What's in setup-enzyme.ts?

ljharb on 26 Mar 2019

@ljharb thanks for reply in the setup-enzyme.ts there is the code of setup-tests.js of https://airbnb.io/enzyme/docs/guides/react-native.html

The error only appears when i activate setupFilesAfterEnv in my package.json

loic-lopez on 26 Mar 2019

What happens if you leave setupFilesAfterEnv but you make setup-enzyme.ts an empty file?

ljharb on 26 Mar 2019

Sorry for not having specified but i use: jest-preset-ignite from infinitered/jest-preset-ignite

"jest": {
    "preset": "jest-preset-ignite",
    "transformIgnorePatterns": [
      "/node_modules/@react-native-community/async-storage/(?!(lib))"
    ],
    "setupFilesAfterEnv": ["./test/setup-enzyme.ts"]
  },

loic-lopez on 26 Mar 2019

If i leave empty setup-enzyme.ts my storyshots tests are passing.

loic-lopez on 26 Mar 2019

Hmm, thats very confusing. I'm not sure why that very simple enzyme setup code would impact your non-enzyme tests like that. I wonder if it's an issue with testStoryshots?

ljharb on 26 Mar 2019

@ljharb it's only happening when the DOM is replaced i think.

loic-lopez on 26 Mar 2019

enzyme doesn't replace the DOM tho; that's something jest does via jsdom.

ljharb on 26 Mar 2019

yes i was saying about this part:

/**
 * Set up DOM in node.js environment for Enzyme to mount to
 */
const { JSDOM } = require('jsdom');

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

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

loic-lopez on 26 Mar 2019

ahh. well yeah you don't need that part if you have jest :-) that's mainly for mocha.

ljharb on 26 Mar 2019

@ljharb but i'm using react-native

loic-lopez on 26 Mar 2019

jest still applies jsdom by default already.

ljharb on 26 Mar 2019

i will rewrite an enzyme test i will be back to you

loic-lopez on 26 Mar 2019

Got:

Error: It looks like you called `mount()` without a global document being loaded.

My test:

test("App mount with enzyme", () => {
    const wrapper = mount<App>(<App/>)
  })

My setup file:

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

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
Enzyme.configure({ adapter: new Adapter() });

/**
 * Ignore some expected warnings
 * see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16
 * see https://github.com/Root-App/react-native-mock-render/issues/6
 */
const originalConsoleError = console.error;
console.error = (message: any): void => {
  if (message.startsWith("Warning:")) {
    return;
  }

  originalConsoleError(message);
};

loic-lopez on 26 Mar 2019

interesting, ok. you may need to set the testEnvironment to jsdom in jest, rather than using that withDom code from this repo.

ljharb on 26 Mar 2019

but is it possible to activate jsdom for specific tests?

loic-lopez on 26 Mar 2019

Not cleanly, because lots of modules cache state at require time about whether it's in a browser or not.

ljharb on 26 Mar 2019

i have found:
https://jestjs.io/docs/en/configuration.html#testenvironment-string

/**
 * @jest-environment jsdom
 */

loic-lopez on 26 Mar 2019

Oh! it's working with this comment on top of the test file.

So i have created a component.enzyme.test.tsx file.

See bellow my sample:

/**
 * @jest-environment jsdom
 */
import { ModalMock } from "./ModalMock"
import * as React from "react"
import { App } from "../../../app/app"
import { mount } from "enzyme"

describe("App tested with airbnb enzyme", () => {

  beforeAll(() => {
    jest.mock("Platform", () => {
      const Platform = jest.requireActual("Platform");
      Platform.OS = "ios";

      return Platform;
    });

    jest.mock("react-native-modal", () => ModalMock);
  })


  test("App mount with enzyme", () => {
   const wrapper = mount<App>(<App/>)
  })
})

loic-lopez on 26 Mar 2019

👍1

Per-test-file, yes, that's exactly the best way - per-test is trickier. Looks like you're all set?

ljharb on 26 Mar 2019

Yes sorry I meant for each enzyme tests files!

Thanks for your support, i think it would be good to document this here: docs/guides/react-native.md

loic-lopez on 26 Mar 2019

Sounds good, want to make a PR?

ljharb on 26 Mar 2019

Yes, i will fork and do the pull request.

loic-lopez on 26 Mar 2019

❤1