testcafe-react-selectors: unable to select in production/staging build

I’m getting the following errors when running test for production build, while those pass on local dev build.

Error: testcafe-react-selectors supports React version 15.x and newer

1) The specified selector does not match any element in the DOM tree.

      Browser: Electron 1.7.5 / Mac OS X 10.12.6

I’m currently using preact in production, but tested with it disabled as well, where still gets the following errors

1) The specified selector does not match any element in the DOM tree.

The react classname is uglified in my production build, which leads to the selector to be invalid.

Was wondering if there’s a workaround to get it work with production/staging build?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15

Most upvoted comments

SOLUTION: If you are using webpack>=4, add this to your webpack production config:

{
  // ...
  optimization: {
    minimizer: []
  }
}

Here is a reproducible example of this:

git clone https://github.com/amilajack/erb-testcafe-example
cd erb-testcafe-example
git checkout add-testcafe-react-selectors
yarn
# Run production build
yarn build
# Run e2e tests against production build
yarn test-e2e

Errors:

 ✖ should navgiate to /counter

   1) The specified selector does not match any element in the DOM tree.

      Browser: Electron 2.0.2 / Mac OS X 10.13.6

         40 |});
         41 |
         42 |test('should navgiate to /counter', async t => {
         43 |  await waitForReact();
         44 |  await t
       > 45 |    .click(ReactSelector('Link').withProps({
         46 |      to: '/counter'
         47 |    }))
         48 |    .expect(getPageUrl())
         49 |    .contains('/counter');
         50 |});

Failing test

test('should navgiate to /counter', async t => {
  await waitForReact();
  await t
    .click(
      ReactSelector('Link').withProps({
        to: '/counter'
      })
    )
    .expect(getPageUrl())
    .contains('/counter');
});

See the diff for this here

I am using webpack to package the production build.

UPDATE: works if i change webpack config mode to 'development'. Also even if i add the recommended uglify settings to the app, that doesn’t fix the issue. I’m thinking the issue has to do with webpack’s default minification in webpack 4. Here is the fix

amilajack on Aug 6, 2018