I was adding a snapshot test to a piece of React code, and I incurred in this error:
Unexpected node type: SequenceExpression (This is an error on an internal node. Probably an internal error. Location has been estimated.)
The code transpiles and works just fine, and the AST explorer doesn't warn me about anything.
Before this new test, no other test gave me any sort of similar error, and we have quite a few of them in our codebase.
I tried to reinstall jest, reinstall babel-jest, remove and reinstall all modules (using yarn --pure-lock), upgraded both jest and babel-jest to the latest version (20.0.1 for both), rinsed and repeated.
Nothing worked.
This occurs only when I try to collect the coverage (with --coverage), while the minimal snippet it occurs with is:
import { tint } from 'polished'
import styled from 'styled-components'
export default styled.label`
background: ${({ x, y }) => (x ? tint(0.3, y.a) : y.b)};
`
Here's what i've found:
This is an issue with jest code coverage being able to understand styled components and polished. I am using babel-plugin-polished with the following in my babelrc:
"plugins": [ "polished" ]
But still if you call export on a value, and do not also use that value in an object or exported object, it will fail.
Fails:
export const charcoalBlue = rgb(104, 131, 145);
Doesn't fail:
export const charcoalBlue = rgb(104, 131, 145);
const colors = { charcoalBlue }
So my solution has been to ignore my style files, or simply ensure I'm using the values I create and not just exporting them.
One way to ignore the style files, place this in your package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*.styles.js",
]
}
And name your style files {ComponentName}.styles.js
Hope this helps!
I came across the same issue!
I fixed it by working around it:
import styled, {css} from 'styled-components';
styled.label`
${({x,y}) => x
? css`background: tint(0.3, y.a);`
: css`background: ${y.b};`
}
`;
Related
I'm currently struggling with making a Jest custom matcher work in VSCode with typescript.
I wrote a custom matchers file like the following (I've simplified the test for brevity reasons):
export {}
declare global {
namespace jest {
interface Matchers<R, T = {}> {
toSucceed(): R
}
}
}
function toSucceed(this: jest.MatcherContext, received: Result<any>): any {
return {
pass: true,
message: () => 'Custom matcher message',
}
}
expect.extend({
toSucceed,
})
I included this file path in my jest.config.ts under the tag setupFilesAfterEnv.
Then I wrote tests like:
it('should pass', () => {
expect(foo()).toSucced()
})
All this configuration works fine, but I still get a VSCode inline error:
Property 'toSucceed' does not exist on type 'JestMatchers<any>'
JestMatchers is a type definition inside the #types/jest root, since it is a type I cannot augment it directly.
Have anyone experienced any similar problem?
I encountered a similar error message when the namespace declaration of "interface Matchers" was incorrect. After fixing that, a custom matcher appeared in jestMatchers, too. Matchers and jestMatchers are connected.
Your code works fine for me—except for the undefined Result<any>—so you can try to directly import in test and see if Visual Studio Code can understand the declaration:
import "./toSucceed";
If direct import works for you, I would guess that there's a problem with the jest extension which helps Visual Studio Code understand jest.config.
Did you remember to add the type definitions to your tsconfig?
For me it works fine when I put the type definition in a d.ts file at the root level, and add that path to the "include" option in my tsconfig:
{
// Some other config
"include": [
"custom-matchers.d.ts"
]
}
Haven't tested with your custom matcher specifically, but I had a similar issue that I resolved like this.
So your custom-matchers.d.ts would be:
export {}
declare global {
namespace jest {
interface Matchers<R, T = {}> {
toSucceed(): R
}
}
}
I'm trying to work with shadow roots in my Testcafe project. It's a little bit complicated to deal with it. I create a custom function that behaves the same as Selector().find() but I struggle with this error :
The "boundTestRun" option value is expected to be a test controller.
when I'm doing as documented here :
import { Selector, t } from 'testcafe'
getInShadowRoot = Selector(
// More code here
)
const boundedGetInShadowRoot = this.getInShadowRoot.with({ boundTestRun: t })
I create a gist to illustrate my problem: https://gist.github.com/HugoDel/a600f3e120674e3f255884f3dc84fee3
Thanks for your help!
Edit:
I finally get rid of it since I don't need to add .with({ boundTestRun: t }) to make it work.
My goal: use a fa-icon which as not been imported yet by JHipster
My try: add the fa-icon GrinHearts manually in the app.vendor.ts file using the following code and then run yarn run webpack:build command
/* after changing this file run 'yarn run webpack:build' */
/* tslint:disable */
import '../content/css/vendor.css';
// Imports all fontawesome core and solid icons
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faUser,
faSort,
faSync,
faEye,
faBan,
faTimes,
faArrowLeft,
faSave,
faPlus,
faPencilAlt,
faBars,
faThList,
faUserPlus,
faRoad,
faTachometerAlt,
faHeart,
faList,
faBell,
faBook,
faHdd,
faFlag,
faWrench,
faClock,
faCloud,
faSignOutAlt,
faSignInAlt,
faCalendarAlt,
faSearch,
faTrashAlt,
faAsterisk,
faTasks,
faHome,
faGrinHearts
} from '#fortawesome/free-solid-svg-icons';
// Adds the SVG icon to the library so you can use it in your page
library.add(faUser);
library.add(faSort);
library.add(faSync);
library.add(faEye);
library.add(faBan);
library.add(faTimes);
library.add(faArrowLeft);
library.add(faSave);
library.add(faPlus);
library.add(faPencilAlt);
library.add(faBars);
library.add(faHome);
library.add(faThList);
library.add(faUserPlus);
library.add(faRoad);
library.add(faTachometerAlt);
library.add(faHeart);
library.add(faList);
library.add(faBell);
library.add(faTasks);
library.add(faBook);
library.add(faHdd);
library.add(faFlag);
library.add(faWrench);
library.add(faClock);
library.add(faCloud);
library.add(faSignOutAlt);
library.add(faSignInAlt);
library.add(faCalendarAlt);
library.add(faSearch);
library.add(faTrashAlt);
library.add(faAsterisk);
library.add(faGrinHearts);
// jhipster-needle-add-element-to-vendor - JHipster will add new menu items here
My issue: I get this error
ERROR in /src/main/webapp/app/vendor.ts
(41,5): Module '"/node_modules/#fortawesome/free-solid-svg-icons/index"' has no exported member 'faGrinHearts'.
Could somebody help me please?
Thanks!
You need to update your #fortawesome/free-solid-svg-icons package, the FaGrinHearts icon is not included in v5.1.0-8, only in v5.1.0+. I'd recommend using the latest version, which is v5.2.0. You can see the versions and the order they were released on npmjs
I am going thru a book tutorial to learn TypeScript and AngularJS 2.0:(Become_a_Ninja_with_Angular2).
At some point it explains how to make your own Pipe and goes thru an implementation of moment.js.
In the folder where my project is located I do in CLI: npm install moment
(FYI: The book also tells to do typings install --save --ambient moment-node, but that throws an error even if I change --ambient by --global, also this error happens to not be a problem to use moment.js as the rest of the code I describe below runs).
Then, as a result of previous CLI, it creates under my project folder: [my project folder]\node_modules\moment
Then in [my project folder]\main.html, I have a <script> tag with: `
<script>
System.config({
defaultJSExtensions: true,
map: {
... [plenty of stuff starting with #angular]..
'#angular/platform-browser-dynamic':'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'rxjs': 'node_modules/rxjs',
'moment':'node_modules/moment/moment'
}
});
System.import('main');
</script>
My custom Pipe looks like this:
import { PipeTransform, Pipe } from '#angular/core';
import * as moment from 'moment';
import 'moment/../locale/fr';
#Pipe({name: 'fromNow'})
export class FromNowPipe implements PipeTransform {
transform(value,args){
let mydate = moment(new Date(value));
console.log(moment.locales());
return mydate.fromNow();
}
}
As you can see in my custom pipe code, to access the locale 'fr', I had to add import 'moment/../locale/fr (what I found by looking at already existing solution on StackOverflow). If this tag was not implemented I had access to 'en' only. Which means that adding other languages will require to add import 'moment/../locale/[the locale I want available].
Anyone has any ideas how to have all the locale from the lib moment.js with just the single import * as moment from 'moment'; statement?
PS: And I added to [My project folder]\app.module.ts:
import { FromNowPipe } from './custom_pipes/fromnow.pipe';
...
#NgModule({
...
declarations: [...,FromNowPipe],
...
})
...
And somewhere in one of my component I have:
[#Component({
selector: 'ns-mycomponent',
template:`
.. <div>{{ '2016/05/01'|fromNow }}</div>..
`
})
I found a workaround:
Based on what I wrote in the question, in [my project folder]\main.html:
System.config({
defaultJSExtensions: true,
map: {
...
}
});
I substitued: 'moment':'node_modules/moment/moment' with 'moment':'node_modules/moment/min/moment-with-locales.min.js'
In my Pipe file I just kept: import * as moment from 'moment';at the beginning of the file and it works: all languages are available.
I recently updated my project to node 5.1.0, npm 3.3.12 and updated all my dependencies... Now I'm fighting against a bunch of errors!
Initially I had the same error thats on this issue: https://github.com/facebook/jest/issues/554, that got easily fixed.
Bur now I'm getting this one now:
Warning: React.createElement: type should not be null, undefined,
boolean, or number. It should be a string (for DOM elements) or a
ReactClass (for composite components).
and
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
I have this in my package.json:
"jest": {
"collectCoverage": true,
"testRunner": "./node_modules/jest-cli/src/testRunners/jasmine/jasmine2",
"scriptPreprocessor": "./node_modules/babel-jest",
"unmockedModulePathPatterns": [
"./node_modules/es6-promise",
"./node_modules/events",
"./node_modules/fbjs",
"./node_modules/flux",
"./node_modules/history",
"./node_modules/immutable",
"./node_modules/lodash",
"./node_modules/moment",
"./node_modules/react",
"./node_modules/react-addons-pure-render-mixin",
"./node_modules/react-addons-test-utils",
"./node_modules/react-d3",
"./node_modules/react-dom",
"./node_modules/react-modal",
"./node_modules/react-router",
"./node_modules/whatwg-fetch"
]
}
And the relevant parts of my tests are:
var ImageGallery = require('../../../app/components/image-gallery/image-gallery');
imageGalleryComponent = TestUtils.renderIntoDocument(
<ImageGallery
items={items}
onSlide={onSlideMock}
lazyLoad={false}
showBullets={true}
showThumbnails={true}
showNav={true}
slideInterval={4000}/>
);
Anyone ran into this issue? Any clues on how to solve it?
In my code I was using babel with "imports", so the problem was that in the tests I needed to use "imports" as well or just add a ".default" in the end of the require statement, something like this:
var ImageGallery = require('../../../app/components/image-gallery/image-gallery').default;