Enzyme: Unknown token type: undefined for class selectors

[palashkaria]

Current behavior

In .find, for all the places that I use a class selector (.find('.class')), I am getting this error: Unknown token type: undefined. Looking at the enzyme code, I see this is happening in selectors.js file, in nodeMatchesToken (line 214) here
(looks like rst-selector-parser itself is giving token.body as an array of arrays for some reason)

If I print the token there, it is an array, with just one item, & using array[0] as the token fixes the issue for me:
if(!token.type && token.length) { token = token[0]; }
Not sure what I'm doing wrong.

(PS: I have recently moved from react 15->16, and ezyme 2->3, and did everything according to the docs. Everything worked fine for a while, but this issue popped up randomly)

Expected behavior

.find('.class') should work fine

Your environment

API

• [x] shallow
• [x] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.8.0
| react | 16.6.3
| react-dom | 16.6.3
| react-test-renderer | 16.6.3
| adapter (below) | 16

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

Did you get your tests passing on react 15 and enzyme 3, before upgrading to react 16? If not, please do that, so we can figure out if this is a React 16 issue or an enzyme 3 issue.

[ljharb]

If so, then could you share your component and test code?

[palashkaria]

So, after the migration, I actually got my tests passing on react 16 + enzyme 3 itself intially.
I parked the migration for a while, & when I came back to it, it didn't work. I guess something changed in between.

Right now, I did as you suggested and used the react-15 adapter (to test it out), but the tests are still failing .

for eg., my code is an simple as

 <div className={theme.subTableWrap}>
    {summary.taskCount > 0 ? (
        <table
            className={classnames(
                theme.subTable,
                theme.expanded
             )}>
                ...
                ...
        </table>
    : null}
</div>

and it failes here ->

  ● test Subtable component with no task

    Unknown token type: undefined

      400 | test('test Subtable component with no task', () => {
      401 |     expect(subTableComponentWithTask.exists()).toBe(true);
    > 402 |     console.log(subTableComponentWithTask.find('.subTable'));
          |                                           ^

subTableComponentWithTask.debug() or subTableComponentWithTask.html() shows the proper DOM sturcture. Using something like findWhere also works, & the tests start executing fine.

To me, this looks like an issue with rst-selector-parser. We are expecting the token.body to be an array of objects, but it is coming as an array of arrays for some reason.

[ljharb]

.debug() is useful; .html() should be ignored.

What does subTableComponentWithTask.debug() print out?

If you npm install --no-save rst-selector-parser@~2.1 or ~2.0, does that fix it?

[palashkaria]

right now rst-selector-parser is at 2.2.3 in my yarn.lock, let me try using 2.1.

.debug() prints the tree properly. (this has happened in atleast 10 places in my codebase, and debug works find everywhere)
output of debug ->

 <div className="subTableWrap">
        <table className="subTable expanded">
          <thead className="subTableHeaders">
            <tr>
              <th className="visitId">
    ...

[palashkaria]

rst-selector-parser 2.0 and 2.1 both give the same issue. see attached screenshot. As you can see, token.body[0] is an array with length 1.

(debugging it at safelyGenerateTokens, parser.parse(selector);)

[ljharb]

What would be most helpful is a repro repo, if you could make one that’d be great.

[palashkaria]

I tried to create a repro repo by making a copy of my exisiting repo, but the issue doesn't show up in that.

Something must be wrong in my setup itself. For now, I have switched to a combination using findWhere, find by component etc.
Will get back to this & try to isolate the issue over the weekend.

[ljharb]

Thanks! If it turns out to be something in enzyme I'm more than happy to find a way to fix it.

[rtmruczek]

I'm experiencing this error too. What @palashkaria described is exactly what happened to me - I was in the process of upgrading from react 15 + enzyme 2, got my tests passing on react 16 + enzyme 3, came back to it after a while and found this error happening on a majority of my tests. I don't have any yarn.lock changes, so it's really mysterious to me why this is happening.

For me, it's occurring where I'm trying to find DOM nodes using the attribute selector WITHOUT a preceding tagname e.g. ([data-test="dropdown"]), although it could be happening in other cases as well.

I can try to create a repro repo if it would be helpful.

[ljharb]

@rtmruczek yes, that would be incredibly helpful!

[rtmruczek]

@ljharb I'll start doing that when I get a chance. In the meantime, I might have something that'll help. The above code is the test that used to work, but now fails. When I refactor it into the below code, the test again passes.

fails:

const element = wrapper.find('[data-test="value"]'); // throws  Unknown token type: undefined
expect(element.find('[data-test="value"]').children().nodes[0]).toEqual('message');

passes:

const element = wrapper.find({'data-test': 'value'});
expect(element.childAt(0).text()).toEqual('message');

[ljharb]

When you say "used to work", do you mean in enzyme 2, or enzyme 3? Thanks - once I can repro, we'll get a fix out ASAP.

[rtmruczek]

Sorry - it used to work in enzyme 3. Today I checked out my enzyme 3 upgrade branch where it had worked, maybe about a month ago. I reinstalled the same modules, and I started experiencing this error.

[rtmruczek]

So, it's definitely an issue with my yarn.lock file. We must have some dependencies that are out of sync somehow. Deleting the yarn.lock file and doing a yarn to regenerate the file fixed my issue.

[ljharb]

@palashkaria any chance you've been able to make a repro case?

[ljharb]

Closing; happy to reopen when we're able to reproduce.

[mikebm]

I am also experiencing this issue. I corrected it locally by changing selector.js buildPredicateFromToken to look like so:

function buildPredicateFromToken(token, root) {
  return function (node) {
      const tokenMatcher = function (bodyToken) {
        if (Array.isArray(bodyToken)) {
            return bodyToken.every(tokenMatcher);
        }
        return nodeMatchesToken(node, bodyToken, root);
    };
    return token.body.every(tokenMatcher);
  };
}

Still unsure what changed, but it appears the nearley.js parser is returning different results than before?

[ljharb]

@mikebm can you provide code that I can use to reproduce the issue? If so, I can reopen this.

[mikebm]

@mikebm can you provide code that I can use to reproduce the issue? If so, I can reopen this.

Will do. Trying to isolate some code into its own repo for reproduction. I was in the process of attempting to create a PR for this, but ran into issues with tests on master failing without any changes. d'oh

[mikebm]

Struggling to reproduce it in an isolated app. Will keep on trying tomorrow.

[mikebm]

I finally figured out what was causing our problem. I could not reproduce this outside of Jest, but it happened every-time within our applications jest tests. The issue is because we had the following entry in moduleNameMapper jest config:
'lodash.flatten': 'lodash/flatten',

Since these are regex patterns, it caused lodash.flattendeep to use lodash.flatten instead. rst-selector-parser uses flattendeep in their grammar.js file to flatten those arrays.

Hope this helps someone else.