Can't use JSX in test files (but can in imported ones) #458
Comments
|
JSX is not yet supported in AVA's tests. As a workaround, you can separate renderer.render(React.createElement(FieldError, props)); |
|
Yep, that's what I'm doing now, here's a working test: import test from 'ava';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import FieldError from '../../../js/components/form/FieldError.js';
test('FieldError shows when the error is in array', assert => {
const errors = [{ attribute: 'email', code: '123' }];
const field = React.createElement(FieldError, {
errors,
attribute: 'email',
code: '123',
}, 'Error message');
const result = ReactDOMServer.renderToStaticMarkup(field);
assert.same(result, '<span class="form__error">Error message</span>');
}); |
|
Would be great to describe this workaround in a "Testing with React" recipe (#446). @tomazzaman Do you have some free time to contribute a recipe for React? No worries if not ;) |
|
Sure, I'd be more than happy, just let me know what to do, I'm quite a noob on contributing on GH :) |
|
No probs, you'll love it! So, here's what you'll need to do:
Let me know if you need any help ;) |
|
Will do! Thanks for the step-by-step guide! I'll get on it once kids are in bed :) |
|
That's weird, FWIW JSX works natively in my tests, not sure what the difference is: https://github.com/mattkrick/redux-socket-cluster/blob/master/__tests__/index-tests.js#L46 |
|
@mattkrick JSX works on |
|
ohhhh good to know. you just saved me a future headache, cheers |
|
@vdemedes I have another recipe that doesn't necessarily include AVA but I think it could be very useful for the users so I was wondering whether you'd be interested in publishing it here. I first planned a blog post, but I think it'll get bigger exposure here. It's about integration testing. |
|
Can I check whether AVA plans to add support for JSX again in the future or whether I should be keeping all my tests in plain JS? |
|
@tomazzaman Could you send me a draft I can read? @benji6 I don't think we had this discussion among core team members, but as for me personally I would like to add native JSX support in future. At the moment, feel free to use the workaround described in this thread. |
|
@vdemedes see this gist. It's not complete, I'd explain what this script does in much more detail and why some decisions were made. |
|
@tomazzaman Not sure about this, as it's out of AVA's scope in my opinion. There are many ways to do integration testing, and I don't feel that we can have one universal recipe for it. Let's see what others think anyway ;) /cc @sindresorhus @jamestalmage |
|
Okay, no problem, I do have some other piece of code I'd like to share though; A basic continuous runner that keeps the process open for instant feedback. I can turn this into a recipe as well. import path from 'path';
import childProcess from 'child_process';
import program from 'commander';
import chokidar from 'chokidar';
import { isMatch } from 'micromatch';
const AVA = require.resolve('ava/cli.js');
program
.version('0.0.1')
.option('-c, --coverage', 'Include code coverage')
.option('-s, --single-run', 'Exit the process after first run')
.parse(process.argv);
let commandArray = [AVA];
if (program.coverage) {
const NYC = path.resolve('node_modules/nyc/bin/nyc.js');
commandArray = [NYC, '--cache', '--reporter=text', '--reporter=html'].concat(commandArray);
}
const sourcesGlob = 'client/js/**/*.js';
const testsGlob = 'client/test/**/*.spec.js';
const watcher = chokidar.watch([sourcesGlob, testsGlob]);
watcher.on('add', function add(filepath) {
this.sourceFiles = this.sourceFiles || [];
this.testFiles = this.testFiles || commandArray;
if (isMatch(filepath, sourcesGlob)) {
this.sourceFiles.push(filepath);
} else if (isMatch(filepath, testsGlob)) {
this.testFiles.push(filepath);
}
});
watcher.on('ready', function ready() {
runSuite(this.testFiles);
});
watcher.on('change', function change(filepath) {
runSuite(this.testFiles);
});
function runSuite(testFiles) {
console.log('Running tests...');
const command = testFiles.concat('--color');
const runner = childProcess.execFile(process.execPath, command, (error) => {
const exitCode = error ? error.code : 0;
if (program.singleRun) process.exit(exitCode);
});
runner.stdout.pipe(process.stdout);
runner.stderr.pipe(process.stderr);
} |
I agree.
I think it would be better as a pull request for #70. |
|
@sindresorhus I'll have a go during the weekend |
|
@tomazzaman \o/ :) |
We can't use jsx in test avajs/ava#458
|
Let's move the JSX recipe discussion to #446. |
Here's the test file I'm trying to run:
The command I'm using:
I get a syntax error on the line with JSX:
My
.babelrc:I've tried running the command with
babel-node, but the result is the same.Not sure what else to try (apart from avoiding JSX in tests all together)
The text was updated successfully, but these errors were encountered: