Karma + enzyme test results in errors

[frankbolviken]

I have this helper class defined:

/**
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react';
import { IntlProvider, intlShape } from 'react-intl';
import { mount, shallow } from 'enzyme';

// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
const messages = require('../assets/en.json'); // en.json

// Create the IntlProvider to retrieve context for wrapping around.
const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
const { intl } = intlProvider.getChildContext();

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
function nodeWithIntlProp(node) {
    return React.cloneElement(node, { intl });
}

export function shallowWithIntl(node) {
    return shallow(
        nodeWithIntlProp(node),
        {
            context: {intl}
        }
    );
}

export function mountWithIntl(node, { context, childContextTypes } = {}) {
    return mount(
        nodeWithIntlProp(node),
        {
            context: Object.assign({}, context, {intl}),
            childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes)
        }
    );
}

and this is my test

import React from 'react';
import { expect } from 'chai';
import { shallowWithIntl } from '../../../../helpers/intl-enzyme-test-helper';
import LoginForm from '../LoginForm.jsx';

describe("LoginForm", () => {
  it("Should render", () => {
    const props = {isAuthenticating: false, statusText: "", login: ()=>{}};
    const wrapper = shallowWithIntl(
      <LoginForm {...props} />
    );
    expect(wrapper).to.have.length(1);
    expect(wrapper.find('RaisedButton').props().disabled).to.be.true;
    expect(wrapper.find('LinearProgress')).to.have.length(0);
  });

I have tried installing karma-intl-shim:
karma.config.js

module.exports = function(config) {
  config.set({
    ....
    frameworks: ['mocha', 'intl-shim'],
    files: [
      './node_modules/react-intl/locale-data/jsonp/en.js',
      'tests.webpack.js'
    ],
    plugins: [
      'karma-webpack',
      'karma-mocha',
      'karma-junit-reporter',
      'karma-sourcemap-loader',
      'karma-chrome-launcher',
      'karma-mocha-reporter',
      'karma-phantomjs-launcher',
      'karma-intl-shim'
    ],
    babelPreprocessor: {
      options: {
        presets: ['airbnb']
      }
    },
    reporters: ['mocha', 'junit'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,
    junitReporter: {
      outputFile: 'test-results.xml',
      useBrowserName: false
    }
  })
};

But when running my test, I get this error:

LoginForm
    ✖ Should render
      PhantomJS 2.1.1 (Mac OS X 0.0.0)
    Method “props” is only meant to be run on a single node. 0 found instead.
    [email protected]:54278:149
    [email protected]:53668:28
    tests.webpack.js:8250:58

Any idea to what may be wrong? I've tried following the https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl but no success.

Any help would be greatly appreciated. Thanks!

Frank

[frankbolviken]

Ok, so it seems I have to add an additional "shallow" function call after the wrapper function on each expect. Should this be needed?

expect(wrapper.shallow().find('RaisedButton').props().disabled).to.be.true;
expect(wrapper.shallow().find('LinearProgress')).to.have.length(0);

[ericf]

I'm not sure, I've never used Enzyme. Have you asked on their support channel?

[jeongsd]

hi i'm jest test with intl

export function shallowWithIntl(node) {
    return shallow(
        nodeWithIntlProp(node),
        {
            context: {intl}
        }
-    )
+    ).first().shallow();
}

enzymejs/enzyme#539