by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:20
    naser-baig-au4 commented #1424
  • 16:14
    naser-baig-au4 commented #1424
  • 14:08
    ssengalanto commented #2369
  • Jul 02 22:03
    lucasteixeira2 commented #1289
  • Jul 02 20:24
    michaelbayday commented #1424
  • Jul 02 14:51
    ljharb commented #2411
  • Jul 02 12:47
    munkacsimark commented #2268
  • Jul 02 11:07
    asingh04 opened #2411
  • Jul 01 03:29
    gusbmurphy opened #2410
  • Jun 30 17:49
    ljharb commented #184
  • Jun 30 14:00
    dmmulroy commented #952
  • Jun 30 10:09
    MurugarajaRS commented #184
  • Jun 30 10:08
    MurugarajaRS commented #184
  • Jun 30 10:07
    MurugarajaRS commented #184
  • Jun 30 10:06
    MurugarajaRS commented #184
  • Jun 30 04:31

    ljharb on master

    [enzyme-adapter-react-helper] [… [enzyme-adapter-react-helper] [… [Tests] `debug`: use `object-in… and 2 more (compare)

  • Jun 29 23:51

    ljharb on enzyme-adapter-react-helper@1.3.9

    [enzyme-adapter-react-helper] [… [enzyme-adapter-react-helper] [… [Tests] `debug`: use `object-in… and 2 more (compare)

  • Jun 29 23:08

    ljharb on enzyme-adapter-react-helper@1.3.9

    [enzyme-adapter-react-helper] [… [enzyme-adapter-react-helper] [… [Tests] `debug`: use `object-in… and 2 more (compare)

  • Jun 29 22:03

    ljharb on enzyme-adapter-react-helper@1.3.9

    [enzyme-adapter-react-helper] [… [enzyme-adapter-react-helper] [… [Tests] `debug`: use `object-in… and 1 more (compare)

  • Jun 29 21:47

    ljharb on enzyme-adapter-react-helper@1.3.9

    [enzyme-adapter-react-helper] [… [enzyme-adapter-react-helper] [… [Tests] `debug`: use `object-in… and 1 more (compare)

Curtis Maloney
@funkybob
however I'm getting a test failure that seems to stem from my component receiving a theme that is not the one set in the scaffold
am at a loss of what subtleties I'm missing that could cause this
Curtis Maloney
@funkybob
gah, have run into t his again... still no idea why it's happening :/
Curtis Maloney
@funkybob
FYI - the theme is correct when I use mount()
Curtis Maloney
@funkybob
but b0rked when I use shallow()
Curtis Maloney
@funkybob

OK... https://medium.com/7shifts-engineering-blog/testing-usecontext-react-hook-with-enzyme-shallow-da062140fc83

this article seems to say it's an issue between enzyme and useContext

for those playing along at home; enzymejs/enzyme#2176
v_andreychuk-blackbird
@vandreychuk-blackbird
hi guys, I have issue with enzyme's mount method.
It crashing ONLY when im trying to use mount, when use shallow everything works fine.
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