by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 00:29
    Nikhil22 commented #2426
  • Aug 04 04:04
    ljharb labeled #2426
  • Aug 04 04:04
    ljharb commented #2426
  • Aug 04 02:46
    Nikhil22 edited #2426
  • Aug 04 02:46
    Nikhil22 edited #2426
  • Aug 04 02:45
    Nikhil22 opened #2426
  • Aug 03 21:38
    schnebly commented #2424
  • Aug 03 21:26
    Q-up commented #1631
  • Aug 03 21:25
    ljharb labeled #2396
  • Aug 03 21:25
    ljharb labeled #2396
  • Aug 03 21:25
    ljharb closed #2396
  • Aug 03 21:25
    ljharb commented #2396
  • Aug 03 06:50
    ljharb commented #2424
  • Aug 01 07:37
    JaroSlavDEV closed #2425
  • Jul 31 23:34
    schnebly commented #2424
  • Jul 31 18:43
    ljharb commented #566
  • Jul 31 18:41
    Talkwondo commented #566
  • Jul 31 16:53
    lquixada commented #2042
  • Jul 31 16:53
    lquixada commented #2042
  • Jul 31 15:53
    mmassaki commented #2042
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
image.png
@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