Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 26 21:02
    Rogeriohsjr commented #1424
  • Feb 26 21:01
    ljharb commented #2505
  • Feb 26 21:01
    ljharb commented #2505
  • Feb 26 18:50
    dylankil commented #2505
  • Feb 25 18:51
    sonicvision commented #2086
  • Feb 25 18:19
    dylankil commented #2505
  • Feb 25 04:06
    ljharb commented #184
  • Feb 25 04:04
    ljharb commented #1800
  • Feb 25 04:03
    ljharb labeled #2505
  • Feb 25 04:02
    ljharb commented #2505
  • Feb 25 02:57
    i3web commented #2305
  • Feb 25 02:45
    dylankil edited #2505
  • Feb 25 01:39
    dylankil opened #2505
  • Feb 25 01:32
    dylankil commented #1800
  • Feb 24 19:59
    AlbogastAman commented #184
  • Feb 24 15:29
    ljharb commented #184
  • Feb 24 14:17
    AlbogastAman commented #184
  • Feb 24 11:39
    sirajalam049 commented #1436
  • Feb 24 09:08
    macaframa commented #2241
  • Feb 24 04:01
    dschinkel commented #2073
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 :)
Nick Artemov
@kerosan
hi all
do you know right way to test FunctionalComponent with useEffect/useCallback ?
Ashik Meerankutty
@ashikmeerankutty
hi everyone is there a way to use setSelectionRange for a textarea
Jenifer L.
@jelowing
Hi, Is anybody here?
I have a component wrapper with a Provider and store and I simulate a click event. I want to test that some state prop has change but nothing changes
Sergio
@Gio2k
hello, one question, is there already an adapter for react 17?
Jordan Harband
@ljharb
no, not yet. There’s an open issue to track it.
werner-jakobsmeier-thd
@werner-jakobsmeier-thd
Hi, I am having an issue with getting enzyme to work in our react 16 app:
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
Is there anyone who could get in touch with me, we seem to have exhausted all the references and SO related links and we just can not get it to work. Please :(
Jordan Harband
@ljharb
the docs describe configuring an adapter, have you done that?
werner-jakobsmeier-thd
@werner-jakobsmeier-thd
We tried, sorry for the late response.
We ended up abandoning Enzyme.
We were working in TS and just couldn't make it work.
Maybe you guys should reevaluate the docs because there are quite a few instances of people just not being able to get it to work.
Jordan Harband
@ljharb
lol, after 4 hours?
i'm happy to improve the doc, but afaik using TS doesn't change anything, and https://enzymejs.github.io/enzyme/docs/installation/ covers configuring the adapter
MOR NDIAYE
@Almorisson
Hello everyone. I'm new in Gitter. Hope to learn with the community and share knowlegde. if someone like to guide me through, i'm an I am an open-minded. Thanks in advance for your welcome
Roy
@iroy2000
I have a hard time testing lazy loading component using React.Suspense and React.lazy. I'm using "enzyme": "^3.10.3",. I'm wondering if that is supported or how would I test it ?
Jordan Harband
@ljharb
it should be supported, using the suspenseFallback option. try enzyme v3.11, and the latest adapter, just in case.
fabio-silva
@fabio-silva

Hey there. I'm facing an interesting problem that I can't figure out:
I got a form which I'm testing, so I get the submit button like this: button = wrapper.find('#notification-channel-add-button')
I then try so simulate a change event: input.simulate('change', { target: { value: 'Sample text' } })
Then, depending on how I test the disabled state of the button, I get different results:

// Correctly passes
expect(button.getDOMNode().hasAttribute('disabled')).toBeFalsy();

// This fails
expect(button.props().disabled).toBeFalsy();

Has anyone ever faced this problem?