astro/packages/astro/test/preact-component.test.js
2021-12-22 16:11:05 -05:00

87 lines
2.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
let fixture;
before(async () => {
fixture = await loadFixture({
devOptions: {
port: 3009,
},
projectRoot: './fixtures/preact-component/',
renderers: ['@astrojs/renderer-preact'],
});
await fixture.build();
});
describe('Preact component', () => {
it('Can load class component', async () => {
const html = await fixture.readFile('/class/index.html');
const $ = cheerio.load(html);
// test 1: Can use class components
expect($('#class-component')).to.have.lengthOf(1);
});
it('Can load function component', async () => {
const html = await fixture.readFile('/fn/index.html');
const $ = cheerio.load(html);
// test 1: Can use function components
expect($('#fn-component')).to.have.lengthOf(1);
// test 2: Can use function components
expect($('#arrow-fn-component')).to.have.lengthOf(1);
});
it('Can load TS component', async () => {
const html = await fixture.readFile('/ts-components/index.html');
const $ = cheerio.load(html);
// test 1: Can use TS components
expect($('.ts-component')).to.have.lengthOf(1);
});
it('Can use hooks', async () => {
const html = await fixture.readFile('/hooks/index.html');
const $ = cheerio.load(html);
expect($('#world')).to.have.lengthOf(1);
});
it('Can export a Fragment', async () => {
const html = await fixture.readFile('/frag/index.html');
const $ = cheerio.load(html);
// test 1: nothing rendered but it didnt throw
expect($('body').children()).to.have.lengthOf(0);
});
it('Can use a pragma comment', async () => {
const html = await fixture.readFile('/pragma-comment/index.html');
const $ = cheerio.load(html);
// test 1: rendered the PragmaComment component
expect($('.pragma-comment')).to.have.lengthOf(1);
expect($('.pragma-comment-tsx')).to.have.lengthOf(1);
});
// In moving over to Vite, the jsx-runtime import is now obscured. TODO: update the method of finding this.
it.skip('Uses the new JSX transform', async () => {
const html = await fixture.readFile('/pragma-comment/index.html');
// Grab the imports
const exp = /import\("(.+?)"\)/g;
let match, componentUrl;
while ((match = exp.exec(html))) {
if (match[1].includes('PragmaComment.js')) {
componentUrl = match[1];
break;
}
}
const component = await fixture.fetch(componentUrl).then((res) => res.text());
const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime'));
// test 1: preact/jsx-runtime is used for the component
expect(jsxRuntime).to.be.ok;
});
});