by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 01:26
    ljharb commented #2445
  • Sep 23 23:23

    ljharb on master

    [*] [dev deps] update `eslint` [enzyme-adapter-react-16] v1.15… (compare)

  • Sep 23 22:54

    ljharb on enzyme-adapter-react-16@1.15.5

    [*] [dev deps] update `eslint` [enzyme-adapter-react-16] v1.15… (compare)

  • Sep 23 22:36
    ljharb closed #2417
  • Sep 23 22:36
    ljharb commented #2417
  • Sep 23 18:44
    aashayamballi edited #2453
  • Sep 23 18:43
    ljharb commented #1222
  • Sep 23 18:41
    aashayamballi opened #2453
  • Sep 23 18:40
    ljharb commented #2429
  • Sep 23 18:00
    trigunam commented #2429
  • Sep 23 17:53
    aashayamballi commented #2282
  • Sep 23 17:52
    tareqdayya commented #2412
  • Sep 23 17:42
    trigunam commented #1222
  • Sep 23 17:35
    ljharb commented #2412
  • Sep 23 17:34
    ljharb commented #1222
  • Sep 23 17:06
    trigunam commented #1222
  • Sep 23 06:57
    tareqdayya commented #2412
  • Sep 23 04:49
    dschinkel commented #2448
  • Sep 23 04:49
    dschinkel commented #2448
  • Sep 23 04:47
    ljharb commented #2448
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
hybaken
@hybaken

Hi, I am new to enzyme.
I am trying to test my functional component, but shallow returns me always null. Any idea where I should look at?

const wrapper = shallow(<MyComponent />);

I do have set adapter in setupTest.js (app created with create-react-app)

import '@testing-library/jest-dom/extend-expect';
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

I have tried to shallow on direct html element and this works fine.

const wrapper = shallow(<div >test</div>);

For check I use

 console.log(wrapper.first().html())
2 replies
Abhishek Singh
@asingh04
Hi I am stuck with something, can anyone help me out?
I am calling a member function of a class component using enzyme in a unit test, and that function calls thethis.setState
but the state of my component is not updating
Abhishek Singh
@asingh04
class MyComp extends React.Component {
    state = { value: '' }
    handleChange = (e) => {
        this.setState({ value: e.target.value }, () => {
            // do sommething else
        });
    }

    render() {
        return (
            <input onChange={ this.handleChange } />
        )
    }
}

const wrapper = shallow(<MyComp />);

wrapper.find('input').simulate('change', {
    target: {
        value: 1,
        name: 0
    }
});

expect(wrapper.state().value).toEqual('1'); // this gives error as it is receiving state.value as ''
6 replies
Can anyone please help me understand why the component's internal setState is not working?
Jordan Harband
@ljharb
oh, well yeah
this.setState shouldn't be given an object, it should be given a callback
altho hm
that should work. but since you do handleChange =, instead of a proper bound prototype method, that means you also can't mock it out
(don't put functions in class fields)
Othniel
@Kojey
Hi everyone, I'm new to web development and I've started using enzyme a few days ago.
I am using mount to load a component into the DOM. One of its children is a Blueprint3.Select component whose value I want to change.
Unlike with shallow, I cannot use simulate on the react component to change its value which is wrapped in a <div>.
I have two questions:
  • Is there a way I can manipulate the DOM directly to set the value of the <div> of this component?
  • Can we use simulate on React component when using mount?
Jordan Harband
@ljharb
i wouldn't suggest using simulate ever
if you want to invoke a prop function, use .invoke
Othniel
@Kojey
@ljharb Thanks :)