enzymejs/enzyme

JavaScript Testing utilities for React

v_andreychuk-blackbird

@vandreychuk-blackbird

error message is:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

simple test:

describe('Select component', () => {
  const wrapper = mount(<Select {...requiredProps} />);
  const selectRoot = findByTestAttr(wrapper, 'selectRoot');
  selectRoot.simulate('click');

  it('should open dropdown', () => {});
});

if replace mount to shallow - it works.
but I have case when need to test component using mount...

can somebody help me pls?

packages versions:
"jest": "^25.1.0", "babel-jest": "^25.1.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.4.4",

Jordan Harband

@ljharb

what's "findByTestAttr"

test IDs are an archaic and brittle approach, i strongly suggest you don't use it.

what is the "select root" you're finding, and why isn't it the actual root that Select is rendering?

(separately, don't use simulate, it doesn't faithfully simulate anything)

v_andreychuk-blackbird

@vandreychuk-blackbird

 export const findByTestAttr = (wrapper, val) => {
  return wrapper.find(`[data-test="${val}"]`);
};

 <div
      data-test="selectRoot"
      ref={rootElement}
      className={css(styles.regular.root)}
      onClick={toggleDropdown}
    >...</div>

selectRoot its just a div which wraps component

@ljharb
I removed everything but error still occurs.

describe('Select component', () => {
  const wrapper = mount(<Select {...requiredProps} />);

  it('should open dropdown', () => {});
});

Jordan Harband

@ljharb

so, that warning means that you're likely importing something wrong in Select (or Select itself in the test) and you're trying to make an element from undefined

if you console.log(Select) before mount/shallow, what do you see

v_andreychuk-blackbird

@vandreychuk-blackbird

@ljharb

console.log src/features/FormComponents/components/Select/Select.test.js:14
      { [Function: Select]
        propTypes:
         { name: [Function: bound checkType],
           value:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           items: [Function: bound checkType],
           onChange: [Function: bound checkType],
           disabled:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           error:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           required:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           template:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           label:
            { [Function: bound checkType] isRequired: [Function: bound checkType] },
           placeholder:
            { [Function: bound checkType] isRequired: [Function: bound checkType] } } }

I just console.log(Select)

Jordan Harband

@ljharb

k, so that works. what about inside Select? double check everything you're using as a custom element

v_andreychuk-blackbird

@vandreychuk-blackbird

@ljharb ArrowDown its just svg

Jordan Harband

@ljharb

right but if you console.log(ArrowDown) what prints out?

also what do you mean it's just svg

v_andreychuk-blackbird

@vandreychuk-blackbird

double check everything you're using as a custom element

v_andreychuk-blackbird

@vandreychuk-blackbird

the problem is really here

<div data-test="selectClosedDropDown" className={css(styles.value(error, template).base)}>
        {value ? value : <span className={css(styles.regular.placeholder)}>{placeholder}</span>}
        <ArrowDown
          width={24}
          height={24}
          fill={colorBlack}
          className={css(styles.regular.arrowDown)}
        />
      </div>

my test crashing coz it can't handle SVG. how to solve it?)

Jordan Harband

@ljharb

don't rely on webpack for stuff like that. use https://github.com/airbnb/babel-plugin-inline-react-svg

basically anything you do in webpack that's not "run babel" or "minify" is tech debt

v_andreychuk-blackbird

@vandreychuk-blackbird

thank u bro <3

btisjelo

@btisjelo

Hi, anybody here?

How can I add a mock config file to my tests? For example config.SECURITY:

const userElements = config.SECURITY !== 0 && (
      <Dropdown
        overlay={userMenuOptions}
        placement="bottomRight"
        trigger={['click']}
      >
        <div className="configUser">
          {avatar}
          <span className="configUser__user">
            {window.innerWidth > config.BREAKPOINTS.MD &&
              (isEmpty(userData)
                ? 'Userinfo'
                : userData.name + ' ' + userData.surname)}
          </span>
          <Icon type="down" />
        </div>
      </Dropdown>
    );

Marius Jakobsen

@jakobsen9

Hi!
I can't get the onBlur event to be triggered:

    wrapper
      .find('Input')
      .findWhere(input => input.props().accessibilityLabel === 'mobilnummer')
      .first()
      .props()
      .onBlur();

The test fails with the following error on the last line: TypeError: Cannot read property 'length' of undefined. Any ideas? It's working fine with an onChangeText event I trigger just before this, on the same element.

Andrew Luca

@iamandrewluca

Hello! Can someone tell me, does enzyme support global wrappingComponent
Something like this.

import Enzyme  from 'enzyme';
import React, { StrictMode } from 'react'
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter(),
  wrappingComponent: ({ children }) => <StrictMode>{children}</StrictMode>
});

When I use this I get a stack overflow error

    RangeError: Maximum call stack size exceeded

      at createElement (node_modules/react/cjs/react.development.js:753:23)
      at createElement (node_modules/react/cjs/react.development.js:1733:31)
      at wrapWithWrappingComponent (node_modules/enzyme-adapter-utils/src/Utils.js:347:5)
      at ReactSixteenAdapter.wrapWithWrappingComponent (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:903:13)
      at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:353:53)
      at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
      at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)
      at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:355:29)
      at WrappingComponentWrapper.ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:393:21)
      at new WrappingComponentWrapper (node_modules/enzyme/src/ShallowWrapper.js:1771:40)

So, does enzyme support this?

Andrew Luca

@iamandrewluca

I think I will create my own wrapper

function mount(cmp, options = {}, ...rest) {
  return enzymeMount(cmp, { ...options, wrappingComponent: StrictMode }, ...rest)
}

pranjali1dhumal

@pranjali1dhumal

I want to test Context Consumer and Provider, please can anyone help me with a proper example, quite confused with the implementation, also when i do wrapper.context('value') , i get undefined . let editItem = mount(<EditItem {...props}/>,{context: {value : 'test'}); Also can consumer be used in class components ?

Santosh Kumar

@neelasantosh

Hi, I am trying to get the <options> from the <select> , code is
properties.map((item) => <option key={item} value={item}> {item} </option>)
I am using the shallow render and test case code for option is
it('should have the correct number of option tags', function(){ expect(comp.find('option').length).toBeGreaterThan(0); })

test case is passed but it is not passing through option tags in
properties.map((item) => <option key={item} value={item}> {item} </option>)

please, can some one help me with this

code coverage is failing

Jordan Harband

@ljharb

@neelasantosh not sure what you mean

can you share the full test code, and also the full component code?

Jordan Harband

@ljharb

@iamandrewluca it should work, yes - that rangeerror is something i'd love you to file as an issue

Andrew Luca

@iamandrewluca

Thanks @ljharb
I added wrappingComponent using Enzyme.configure in react-transition-group library wihtout problems
When tried to add it in reactstrap library I got the issue mentioned above.

Jordan Harband

@ljharb

i'm not familiar with that library, but an issue would be great

Tomek Kasperek

@kasperekt

Hey everyone. I know that this topic has been covered many times, but nothing has worked for me. I am trying to create function that will shallow render my component with its store (Redux store). I am using this snippet:

export function shallowWithStore(component, store) {
    function ProviderWrapper({ children }) {
        return (
            <Provider store={store}>
                {children}
            </Provider>
        );
    }

    return shallow(component, {
        wrappingComponent: ProviderWrapper,
    });
}

Later in the test I will use:

const component = shallowWithStore(<ReplyEditContainer />, createMockStore(store));

And it seems it doesn't work. I always get the same error, even if I don't use wrappingComponent option at all.

Error: Could not find "store" in the context of "Connect(ReplyEditContainer)". Either wrap the root component in a <Provider>, or pass ...

Is there anything missing in my code, because the API seems to fit perfectly for my usecase

Tomek Kasperek

@kasperekt

I am using react-redux@^7.0.0 btw. I just saw that there is some issue hooks

Jordan Harband

@ljharb

react doesn't provide hooks for hooks

so you can't use shallow, with a react-redux version that uses hooks, at least not out of the box

Tomek Kasperek

@kasperekt

Okay. Cool. So for now there is no resolution for this right, other than downgrading to earlier versions

duolingo-appearance

@duolingo-appearance

Does anyone have a clue about this issue, enzymejs/enzyme#2415

Hardik Kaji

@hardikkaji

Hello 👋 , I am facing issue with mount with MobX observer component.
it's throwing below error.

 ✖ should render properly
      HeadlessChrome 83.0.4103 (Mac OS X 10.15.6)
    Error: Enzyme Internal Error: unknown node with tag 15


describe("<SomeComponent />", function () {
    it("should render properly", function () {
        const component = mount(
            <StoreProvider>
                <SomeComponent />
            </StoreProvider>
        );
    });
});

The error comes when i wrap my component with observer(SomeComponent)

afeel87

@afeel87

Hello, I am facing issue with the shallow

const props = {
intl: { formatMessage: jest.fn() },
resetFormAction: jest.fn(),
history: jest.fn()
};

let instance = null;

beforeEach(() => {
    instance = shallow(<NotificationView {...props}/>);
});

it('should render the notification component', () => {
    expect(instance.exists()).toEqual(true);
});

it('should find the elements of the notification component', () => {

    const notification = instance.find(Notification);
    const notificationActionBar = instance.find(NotificationActionBar);

    expect(notification.exists()).toBe(true);
    expect(notificationActionBar.exists()).toBe(true);
});

TypeError: Enzyme::Selector expects a string, object, or Component Constructor

Jordan Harband

@ljharb

the implication is that either Notification or NotificationActionBar is not actually a component constructor.

try console.logging them and confirm

Where communities thrive

People

Repo info

Activity