Enzyme: Support for pseudo-classes

[cameronroe]

It would be great to have support for pseudo-class selectors.

Current Error

Error: Enzyme received a pseudo-class CSS selector (':first-child') that it does not currently support

[vkraucunas]

Along the same vein, input:required would also be great.

[Yimiprod]

In the same idead button:not(.is-disabled) would be awesome.

[nickkhall]

Any pseudo class support would be nice!

[Lieblein]

This also does not work: const inputsWithError = formWrap.find('[class$=--state-error]');

[nickhallph]

I'm nickkhall's clone, and I agree with my clone. I need them pseudo's!!

[ljharb]

@aweary is this covered by v3?

[aweary]

@ljharb the infrastructure is there, but the implementation is not. I will investigate this today to see what set of pseudo-classes we can reasonably support.

[trigun539]

Is there anyway to get a focused element?

[lgandecki]

@aweary Hello there, any update? If you can give me some tips/clues/observations I'm happy to jump in and implement this, but I wouldn't want to duplicate any effort if you already put some thoughts into this. Please let me know :)

Having things like first-child / nth-child would be fantastic. To give some context - I'm currently writing a "page-object wrapper" which allows me to run the same tests with any driver (cypress, chimp, wdio, enzyme)..

So basically you can do something like:

class LoginPage {
  constructor (driver) {
    this.driver = driver;

    const root = '.login__form';
    this.selectors = {
      root,
      loginButton: `${root} .button--primary`,
      loginInput: `${root} #username`,
      passwordInput: `${root} #password`,
      swalContainer: `.swal2-shown`
    };
    Object.entries(this.selectors).forEach(([name, selector]) => {
      Object.defineProperty(this, name, {get: function () { return this.driver.getElement(selector); }});
    });
  }

  async setPassword (password) {
    await this.passwordInput.setValue(password);
  }
  async setUsername (username) {
    await this.loginInput.setValue(username);
  }
  async login () {
    await this.loginButton.click();
  }
  assertIsActive () {
    this.root.assertIsVisible();
  }
  assertNotActive() {
    this.root.assertNotVisible()
  }
}

and then run your tests:

test('login correct ', async () => {
  const resolvers = {...};
  const wrapper = await startApp(resolvers);
  const loginPage = new LoginPage(wrapper);

  await loginPage.setPassword('correctPassword');
  await loginPage.setUsername('correctUsername');
  await loginPage.login();

  loginPage.assertNotActive() 
});

and internally in startApp depending on the context you run the tests with enzyme, or e2e with a browser. It works like a dream with react and graphql, with instant feedback with wallabyjs, and I'm very excited to share this with a world in the next couple weeks.

Being able to use more sophisticated selectors would be fantastic to have here :)

[yahilmadakiya]

I have an issue with ':focus'.
Error: Enzyme::Selector does not support pseudo-element or pseudo-class selectors.

const wrapper = mount( <UrlInputButton autofocus={ false } /> );
wrapper.setState( { expanded: true } );
const elem = wrapper.find( 'input[type="text"]' );
expect( elem.is( ':focus' ) ).toBe( false );

Thanks.

[ljharb]

1537 added support for some of these, and will be in the next release.

I'm going to close this one; please file a new issue for each/any pseudoselector you'd like to see supported, or that isn't supported properly. Thanks!

[franciscop-invast]

That looks great, has it been published to npm? I updated Enzyme to search for :first-child but I'm still seeing the same error.

[ljharb]

enzyme has not yet been updated, no. it will be updated as soon as possible.

[Emidomenge]

Please guys, this feature would be great, unless I'm mistaken, there is still nothing released ! :'(

In my case, I'm unable to detect the value of pseudo class ::place-holder

Did someone find a workaround meanwhile ?

Thanks

[ljharb]

@Emidomenge It's definitely been released. Are you sure your transitive dependencies are fully updated?

[Emidomenge]

@ljharb You're right, I don't have the latest version, my bad ! ^^
But still, I didn't see on documentation something which explain how to deal with pseudo class, it would be cool. :)
Have a nice day

[ljharb]

Sure, a PR to improve docs would be appreciated.