nkbt / esnext-quickstart Goto Github PK

View Code? Open in Web Editor NEW

55.0 55.0 7.0 490 KB

Bring compilation and code validation to your front-end development process

License: MIT License

JavaScript 85.20% CSS 14.80%

esnext-quickstart's People

Contributors

Stargazers

Watchers

Forkers

davidmason favorit zangrafx hanss cubedro enjoylife maksimdegtyarev

esnext-quickstart's Issues

Use shallow rendering for testing

See http://simonsmith.io/unit-testing-react-components-without-a-dom/

Feature request (jsx-control-statements)

I'm having trouble getting this library https://github.com/valtech-au/jsx-control-statements to work with this code. Would you mind pointing me in the right direction?

Support ES6 classes syntax with working coverage

The issue appears in coverage. Everything usually works fine, but coverage is kind of broken because of transpiling:

There is a solution:

But it does not fix everything unfortunately:

Example test can never fail.

It looks like .toHaveText() is doing something strange.

I ran npm run karma and it shows 1 of 1 SUCCESS. That is fine and what I would expect.

Next, I tried to make the test fail by changing the text in src/app.Content.js so that "Hello" would not appear in content (after looking in spec/app/Content-spec.js to find out what it was testing), but the test still passed.

I added to the test expect(h1).not.toHaveText('asdfghjkl'); and this caused a failure with some fairly unreadable output:

Chrome 43.0.2357 (Linux 0.0.0) Content Should render greetings FAILED
    Expected ({ getDOMNode: Function, props: Object({ children: 'Nope' }), context: Object({  }), state: null, refs: Object({  }), _reactInternalInstance: ({ _currentElement: Object({ type: 'h1', key: null, ref: null, _owner: ({ _currentElement: Object({ type: Function, key: null, ref: null, _owner: null, _context: Object({  }), _store: Object({ props: Object({  }), originalProps: Object({  }) }) }), _rootNodeID: '.0', _instance: ({ getDOMNode: Function, props: Object({  }), context: Object({  }), state: null, refs: Object({  }), _reactInternalInstance: <circular reference: Object> }), _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: ({ _currentElement: Object({ type: 'section', key: null, ref: null, _owner: <circular reference: Object>, _context: Object({  }), _store: Object({ props: Object({ children: <circular reference: Object> }), originalProps: Object({ children: <circular reference: Object> }) }) }), _rootNodeID: '.0', _instance: ({ getDOMNode: Function, props: Object({ children: <circular reference: Object> }), context: Object({  }), state: null, refs: Object({  }), _reactInternalInstance: <circular reference: Object> }), _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: ReactDOMComponent({ _tag: 'section', _renderedChildren: Object({ .0: <circular reference: Object> }), _previousStyleCopy: null, _rootNodeID: '.0', _currentElement: Object({ type: 'section', key: null, ref: null, _owner: null, _context: null, _store: Object({ props: Object({ children: <circular reference: Object> }), originalProps: Object({ children: <circular reference: Object> }) }) }), _mountIndex: 0, _mountImage: null, _isOwnerNecessary: false, _warnedAboutRefsInRender: false }), _context: Object({  }), _mountOrder: 2, _isTopLevel: false, _pendingCallbacks: null, _mountIndex: 0, _mountImage: null, _isOwnerNecessary: false, _warnedAboutRefsInRender: false }), _context: Object({  }), _mountOrder: 1, _isTopLevel: true, _pendingCallbacks: null, _mountIndex: 0, _mountImage: null, _isOwnerNecessary: false, _warnedAboutRefsInRender: false }), _context: Object({  }), _store: Object({ props: Object({ children: 'Nope' }), originalProps: Object({ children: 'Nope' }) }) }), _rootNodeID: '.0.0', _instance: <circular reference: Object>, _pendingElement: null, _pendingStateQueue: null, _pendingReplaceState: false, _pendingForceUpdate: false, _renderedComponent: ReactDOMComponent({ _tag: 'h1', _renderedChildren: null, _previousStyleCopy: null, _rootNodeID: '.0.0', _currentElement: Object({ type: 'h1', key: null, ref: null, _owner: null, _context: null, _store: Object({ props: Object({ children: 'Nope' }), originalProps: Object({ children: 'Nope' }) }) }), _mountIndex: 0, _mountImage: null, _isOwnerNecessary: false, _warnedAboutRefsInRender: false }), _context: Object({  }), _mountOrder: 3, _isTopLevel: false, _pendingCallbacks: null, _mountIndex: 0, _mountImage: null, _isOwnerNecessary: false, _warnedAboutRefsInRender: false }) }) not to have text 'asdfghjkl'.
        at Object.eval (webpack:///./spec/app/Content-spec.js?:12:20)
Chrome 43.0.2357 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.026 secs / 0.023 secs)

It looks like instead of the string that is passed to .toHaveText, the function is receiving an object like Object{equals: function (a, b, customTesters) { ... }, contains: function (haystack, needle, customTesters) { ... }, buildFailureMessage: function () { ... }}, which is then possibly being converted to a string and treated as a regular expression.

The call stack at this point:

    at compare (webpack:///./~/react-jasmine-matchers/lib/index.js?:57:24)
    at Expectation.toHaveText (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:1385:35)
    at Object.eval (webpack:///./spec/app/Content-spec.js?:11:16)
    at attemptSync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:1789:24)
    at QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:1777:9)
    at QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:1762:10)
    at Spec.Env.queueRunnerFactory (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:627:35)
    at Spec.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:353:10)
    at Object.fn (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:2360:37)
    at attemptAsync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?578a1e5ff14db21b04e2d6db7fd0eda37042440c:1819:24)'

There is an error in my app.

When I use jsx-control-statements in my application it says "Module build failed:TypeError:babel.Transformer is not a function".
my babel-loader is v6.0.1 , and I write config in my webpack.config.js like this: {test: /.js$/, loaders: ['react-hot', 'babel-loader?presets[]=es2015&plugins=jsx-control-statements/babel'], exclude: /node_modules/} .
I need your help, thank you !

ES6 classes syntax fails in dev

ERROR in ./src/app/Header.js
Module build failed: SyntaxError: /Users/nkbt/nkbt/esnext-quickstart/node_modules/react-hot-loader/index.js!/Users/nkbt/nkbt/esnext-quickstart/node_modules/eslint-loader/index.js!/Users/nkbt/nkbt/esnext-quickstart/src/app/Header.js: 'import' and 'export' may only appear at the top level (6:0)
  4 | 
  5 | 
> 6 | import React from 'react';
    | ^
  7 | 
  8 | 
  9 | export class Header extends React.Component {
    at Parser.pp.raise (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/location.js:73:13)
    at Parser.pp.parseStatement (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/statement.js:99:29)
    at Parser.parseStatement (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/plugins/flow.js:636:22)
    at Parser.pp.parseBlock (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/statement.js:387:21)
    at Parser.pp.parseFunctionBody (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/expression.js:693:22)
    at Parser.parseFunctionBody (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/plugins/flow.js:624:20)
    at Parser.pp.parseFunction (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/statement.js:465:8)
    at Parser.pp.parseExprAtom (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/expression.js:368:19)
    at Parser.parseExprAtom (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/node_modules/acorn-jsx/inject.js:624:24)
    at Parser.pp.parseExprSubscripts (/Users/nkbt/nkbt/esnext-quickstart/node_modules/babel-core/lib/acorn/src/expression.js:217:19)
 @ ./src/app/App.js 18:15-34

Upgrade to react-jasmine-matchers 2.0

There is an error in my app | jsx-control-statements .

When i try to use jsx-control-statements(v1.1.2) in my application, it says "Module build failed: TypeError: babel.Transformer is not a function" , my babel is v6.0.1 and I write my webpack.config.js like this :
{test: /.js$/, loaders: ['react-hot', 'babel-loader?presets[]=es2015&plugins=jsx-control-statements/babel'], exclude: /node_modules/} .

Maybe you can help me . thank you !

README!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.