Is it possible for vscode intellisense to work jest-chained assertions?
natealcedo opened this issue · comments
Hey Matt! I've been wondering for awhile now if it would be possible to not break intellisense when using jest-chain on vscode. It seems that all autocompletion just breaks when this plugin in used.
Current setup
$ npx envinfo --preset jest
npx: installed 1 in 1.071s
System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 AMD Ryzen 5 2400G with Radeon Vega Graphics
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.9.4 - ~/.nvm/versions/node/v8.12.0/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
This is what my setup file looks like
import "jest-enzyme";
import "jest-extended";
import "jest-chain";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });
Sample code which will not have intellisense on the second assertion .not.toBeGreaterThan
describe("Sample test", () => {
it("should work", () => {
expect(2)
.toBe(2)
.not.toBeGreaterThan(2);
});
});This is what it looks like
Ideally, the whole suite of matchers should be shown. Would love some guidance on this! :)
I'm not sure if this is related, but I think it is. With the recent built-in support for TypeScript in CRA, I want to use this library with TypeScript. Unfortunately, TypeScript isn't picking up on the chains too (just as intellisense isn't working). It even returns with errors, which kind of makes it impossible to use it.
error TS2339: Property 'toMatchSelector' does not exist on type 'void'.
Hey I've done some googling (never touched Typescript) and it doesn't seem to be possible to dynamically amend the Jest interface.
Currently matcher definitions look like:
interface Matchers<R> {
toBe(expected: any): R;
}For the chaining to work the definition needs to return Matcher<R> and not just R
interface Matchers<R> {
toBe(expected: any): Matcher<R>;
}@byCedric do you know of a way to dynamically map the existing properties of the interface to a new type?
I've opened #7 with manually crafted types for core/jest-extended matchers.
@natealcedo if you are using vscode-jest then #7 should fix your issue - I'm just unsure if it is the best way to fix the problem long term - thoughts?
@mattphillips Thanks for taking a look into this. I agree that this isn't the best solution. It doesn't make sense to have to manually craft for all types because now we have to track all possible matchers.
To be honest, I don't have a solution for this. Maybe just relying on community support would be a good idea? For example, if someone want's this to work with jest-enzyme, they should be the ones to update the type definitions. I guess, adding a section in the README alluding to this will be good.
At the least, this is a first step until we can come up with a better solution.
I'm not sure if it's possible to reuse the original typing with this library. I agree with Alcedo, make it work first and improve afterward. Your PR is making that work just fine I think. This might be something which can be improved in the original typing, but I'm not sure how. Maybe some geniuses from TypeScript can take a look at this?
@natealcedo @byCedric going to close this, it should be fixed in: https://www.npmjs.com/package/jest-chain/v/1.1.2
I just tried 1.1.2 with Angular and VS Code and still getting intellisense errors on the 2nd chained matcher, although the tests pass, I can't deal with the red squigglies.
@hags033 have you followed the TS setup docs?
@mattphillips yes, we also use jest-extended without any intellisense issues.
@hags033 are you able to create a repro? I'm assuming it's a TS project you're working with?
I unfortunately cannot right now, I looked for an angular jest stack blitz that I could quickly tack onto but didn't find one. We punted on adding chain for now, but are happy with jest and jest extended. We are currently at the latest version of angular if that helps, and I'd be willing to edit any js files if you come up with something for me to test.
Can you take a look through this: https://github.com/mattphillips/jest-chain-with-jest-extended?
It's a very minimal example setup with Typescript/Jest/jest-extended/jest-chain/ts-jest with the types playing nicely in both test and vscode. Hopefully it should fix your problem, one gotcha I noticed just now is that jest-chain needs to be imported after jest-extended in your definition file whatever.d.ts so that it can chain all matchers types.
@mattphillips actually that was the key, we have ts lint alphabetized imports on, so I had to disable that and put chain below extended and now the intellisense errors went away. Thanks for the quick responses.
@hags033 no worries glad it worked! I'll update the readme to include this 😄