Readme updates for typescript
YOU54F opened this issue · comments
Hi,
Great project, thanks!
Just been trying to get this running with a Cypress project in TypeScript but came across some issues, so I am proposing some readme updates for typescript to state that typings are available here
https://www.npmjs.com/package/@types/cypress-axe
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/cypress-axe
And that it won't work with webpack, but will work with browserify pre-processors
Related issues
Cypress Typescript users can switch from webpack, to browerify
https://github.com/cypress-io/cypress-browserify-preprocessor
Happy to make the readme changes if required 👍
Hey, I've just come across this same issue and I don't believe that switching from webpack to browserify makes sense for a team that are used to using webpack in other projects.
If moving to browserify is OK for you then great, but I think the best idea is to find a solution that works with webpack (which is recommended by the cypress docs).
I believe the real fix here would be to configure webpack to load the axe.js without parsing it into a module.
This is what my webpack.config.js looks like:
module.exports = {
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [{
loader: 'ts-loader',
}],
},
{
test: /node_modules\/axe-core\/axe.js$/,
use: ['raw-loader'],
},
],
},
}This changes the way the return type of require, so the injectAxe command then needs to be changed. I've overridden it below, which I appreciate isn't the best solution.
Cypress.Commands.add('injectAxe', () => {
cy.window({ log: false }).then(window => {
const axe = require('axe-core')
window.eval(axe.default)
})
})
I agree with @antonyoneill, a team shouldn't change what technology they're using to package their site just because one plugin doesn't currently work with it.
That being said, Typescript is common enough that I agree if using it requires extra steps these should be included in the Readme.
May I ask where you added that Cypress command? I can't seem to get it to work.
Switching from webpack to browserify is trivial in cypress. Cypress use browserify as their default -processor anyway.
For our project, our UI tests sit separately from our main codebase, so there was no issue for us switching.
In the attached related issues, they explain exactly why webpack isn't working, and alternative solutions have been provided.
I am sure the repo owner would be prepared to consider a pull request that would enable support for both webpack and browserify pre-processors, if either of you feel so inclined
@YOU54F May I ask why you closed this? There's still an issue with the current implementation and Webpack, and having it open means that other people who come across this issue will be more likely to see it and have the info in here help them.
This issue wasn’t to resolve the compatibility issue with Webpack.
I’ve stopped using the package and as there is a bone of contention with regards to proposed updates, it’s not worth the hassle
I guess I'll open a duplicate issue then, since this wasn't resolved and it would be useful to people in the future.
Surely as it’s OSS, either yourself or Anthony should actually propose a PR to add a the command that works with webpack.
This issue was never about getting it to work with Webpack
Don't call me Shirley 😜
Until a PR is opened to get it to work easily without extra configuration with this issue is closed it will be harder for other people with the same issue to find the solution, hence why I opened another issue and linked it.
🙂i did attempt various solutions with webpack in a fork so I could add a holistic solution for ts users with either pre-processor but couldn’t get it to work, so had to park it.
If you do crack it, raise a PR! It’s a great feeling getting a contribution accepted in a project used daily by a fair few so I’m sure it would be appreciated.
I was able to get a things working by just adding this to the webpack.config.js from @antonyoneill
cy.visit('http://localhost:6001');
cy.injectAxe();
I did not have to implement my own injectAxe.
Can anyone explain why this fixes it and I can think about a PR?
I'm not able to get this to work using the workaround
I ran into this issue. After digging into it, I have no idea why eval is used in the original script. This is my workaround:
support/commands.ts
import * as axe from 'axe-core';
declare global {
interface Window {
axe: typeof axe
}
}
Cypress.Commands.add('injectAxe', () => {
cy.window({ log: false }).then(window => {
window.axe = axe;
})
})This will simply assign the value returned by the import rather than running eval on the source (which is already done by the import...)
I'll open a PR to this repo since this should work for both browserify and webpack.
Ran into the same issue while trying to setup cypress on my gatsby blog. The workaround posted by @NicholasBoll did the trick.
I ran into this on a Gatsby blog too ... in my case, nothing else worked. In the end, I managed to solve it with the following:
in support/index.d.ts:
// load type definitions that come wxith Cypress module
/// <reference types="cypress" />
declare namespace Cypress {
interface Chainable {
/**
* Custom command to select DOM element by data-cy attribute.
* @example cy.dataCy('greeting')
*/
dataCy(value: string): Chainable<Element>
injectAxe(): Chainable<EventEmitter>
checkA11y(): Chainable<EventEmitter>
}
}