Issue with Cypress e2e after package updates

664 Views Asked by At

I have a project where I have updated all of the packages.

Before the update all e2e tests functioned as expected.

After the update, The product itself compiles and runs as expected.

However, the e2e tests are showing unexpected issues both in the IDE and at run time.

For example,

 cy.checkA11y(
  {
    rules: {
      'aria-required-children': { enabled: false },
    },
  },
);

In the IDE cy.checkAlly gives me an error stating:

 TS2345: Argument of type '{ rules: { 'aria-required-children': { enabled: boolean; }; }; }' is not assignable to parameter of type 'Options'.   Object literal may only specify known properties, and 'rules' does not exist in type 'Options'.

However, when viewing source the interface 'Options' extends axe.RunOptions which does have a 'rules' entry of type 'RuleObject' which itself has the following structure:

 interface RuleObject {
    [key: string]: {
        enabled: boolean;
    };
}

Not surprisingly, I also get the same error from Cypress when trying to run the tests, so most of them are now failing.

I have tried importing the needed Options class but then of course the compiler complains that the interface has not been exported from the node_modules directory.

My package changes are as follows:

  @ag-grid-community/angular                         23.2.1  →    25.0.1
  @ag-grid-community/client-side-row-model           23.2.1  →    25.0.1
  @ag-grid-community/core                            23.2.1  →    25.0.1
  @ag-grid-enterprise/core                           23.2.1  →    25.0.1
  @ag-grid-enterprise/rich-select                    23.2.1  →    25.0.1
  @angular/animations                                11.0.5  →    11.1.0
  @angular/cdk                                       10.1.1  →    11.1.0
  @angular/cdk-experimental                          11.0.2  →    11.1.0
  @angular/common                                    11.0.5  →    11.1.0
  @angular/compiler                                  11.0.5  →    11.1.0
  @angular/core                                      11.0.5  →    11.1.0
  @angular/forms                                     11.0.5  →    11.1.0
  @angular/material                                  10.1.1  →    11.1.0
  @angular/platform-browser                          11.0.5  →    11.1.0
  @angular/platform-browser-dynamic                  11.0.5  →    11.1.0
  @angular/router                                    11.0.5  →    11.1.0
  @azure/msal-browser                                 2.1.0  →     2.9.0
  @azure/msal-common                                  1.2.0  →     2.1.0
  @graphile-contrib/pg-simplify-inflector             6.0.0  →     6.1.0
  @nestjs/common                                      7.3.2  →     7.6.5
  @nestjs/core                                        7.3.2  →     7.6.5
  @nestjs/graphql                                     7.4.1  →     7.9.6
  @nestjs/platform-express                            7.3.2  →     7.6.5
  @nestjs/serve-static                                2.1.3  →     2.1.4
  @nrwl/angular                                     11.0.16  →    11.1.5
  ajv                                                6.12.4  →     7.0.3
  apollo-angular                                      1.8.0  →     2.2.0
  apollo-angular-link-http                            1.9.0  →    1.11.0
  apollo-cache-inmemory                               1.6.0  →     1.6.6
  apollo-client                                       2.6.0  →    2.6.10
  apollo-link                                        1.2.11  →    1.2.14
  apollo-server-express                              2.11.0  →    2.19.2
  axios                                              0.21.0  →    0.21.1
  class-transformer                                   0.2.3  →     0.3.2
  class-validator                                    0.12.2  →    0.13.1
  core-js                                             3.6.4  →     3.8.3
  file-saver                                          2.0.2  →     2.0.5
  fs-extra                                            9.0.1  →     9.1.0
  graphile-build                                      4.7.0  →    4.10.0
  graphql                                            14.7.0  →    15.4.0
  graphql-middleware                                  4.0.2  →     6.0.2
  graphql-request                              2.1.0-next.1  →     3.4.0
  graphql-shield                                      7.4.2  →     7.5.0
  graphql-tag                                        2.10.3  →    2.11.0
  graphql-tools                                      6.0.10  →     7.0.2
  lodash                                            4.17.15  →   4.17.20
  msal                                                1.4.0  →     1.4.4
  node-mocks-http                                     1.9.0  →    1.10.1
  pako                                               1.0.11  →     2.0.3
  pg                                                  8.0.3  →     8.5.1
  pg-sql2                                             4.7.0  →     4.9.0
  postgraphile                                        4.7.0  →    4.10.0
  postgraphile-plugin-connection-filter               2.0.0  →     2.1.1
  rxjs                                                6.5.5  →     6.6.3
  tslib                                               2.0.0  →     2.1.0
  typeface-titillium-web                             0.0.72  →    1.1.13
  yargs                                              15.4.1  →    16.2.0
  zone.js                                            0.10.3  →    0.11.3
  @angular-devkit/build-angular                    0.1100.5  →  0.1101.0
  @angular-eslint/eslint-plugin                0.8.0-beta.6  →     1.1.0
  @angular-eslint/eslint-plugin-template       0.8.0-beta.6  →     1.1.0
  @angular-eslint/template-parser              0.8.0-beta.6  →     1.1.0
  @angular/cli                                       11.0.5  →    11.1.0
  @angular/compiler-cli                              11.0.5  →    11.1.0
  @angular/language-service                          11.0.5  →    11.1.0
  @graphql-codegen/cli                               1.15.4  →    1.20.0
  @graphql-codegen/typescript-apollo-angular         1.15.4  →     2.2.1
  @graphql-codegen/typescript-graphql-request        1.17.7  →     3.0.0
  @graphql-codegen/typescript-operations             1.15.4  →   1.17.13
  @nestjs/cli                                         7.4.1  →     7.5.4
  @nestjs/schematics                                  7.0.0  →     7.2.6
  @nestjs/testing                                     7.3.2  →     7.6.5
  @nrwl/cypress                                     11.0.16  →    11.1.5
  @nrwl/eslint-plugin-nx                            11.0.16  →    11.1.5
  @nrwl/jest                                        11.0.16  →    11.1.5
  @nrwl/nest                                        11.0.16  →    11.1.5
  @nrwl/node                                        11.0.16  →    11.1.5
  @nrwl/storybook                                   11.0.16  →    11.1.5
  @nrwl/workspace                                   11.0.16  →    11.1.5
  @storybook/addon-actions                           6.0.21  →    6.1.14
  @storybook/addon-controls                          6.0.21  →    6.1.14
  @storybook/angular                                 6.1.11  →    6.1.14
  @types/cypress-image-snapshot                       3.1.2  →     3.1.3
  @types/jest                                        26.0.7  →   26.0.20
  @types/lodash                                    4.14.158  →  4.14.168
  @types/node                                      12.12.38  →  14.14.22
  @types/pg                                          7.14.3  →    7.14.9
  @types/webpack                                    4.41.21  →   4.41.26
  @typescript-eslint/eslint-plugin                    4.3.0  →    4.14.0
  @typescript-eslint/parser                           4.3.0  →    4.14.0
  axe-core                                            3.5.5  →     4.1.1
  cross-env                                           7.0.2  →     7.0.3
  cypress                                             5.3.0  →     6.3.0
  cypress-axe                                         0.8.1  →    0.12.0
  cypress-image-snapshot                              3.1.1  →     4.0.0
  eslint                                              7.6.0  →    7.18.0
  eslint-config-prettier                              7.1.0  →     7.2.0
  eslint-plugin-jsdoc                                30.7.6  →    31.0.8
  husky                                               4.3.0  →     4.3.8
  jest                                               26.1.0  →    26.6.3
  jest-createspyobj                                   1.2.2  →     2.0.0
  jest-preset-angular                                 8.3.1  →     8.3.2
  prettier                                            2.0.5  →     2.2.1
  start-server-and-test                              1.11.2  →    1.11.7
  ts-json-schema-generator                           0.72.1  →    0.83.2
  typescript                                          4.0.3  →     4.0.5
1

There are 1 best solutions below

0
On BEST ANSWER

Finally figured out a solution after visiting the NPM page for axe-cypress.

 cy.configureAxe( {
rules: {
  'aria-required-children': { enabled: false },
 },
});

cy.checkAlly();

Now I've got a whole different set of issues, but outside the scope of this question I guess. :)