astro/packages/astro/test/react-component.test.js

/**
 * UNCOMMENT: improve Vite automatic React support
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';

let fixture;

before(async () => {
  fixture = await loadFixture({ projectRoot: './fixtures/react-component/' });
  await fixture.build();
});

describe('React Components', () => {
  it('Can load React', async () => {
    const html = await fixture.readFile('/index.html');
    const $ = cheerio.load(html);

    // test 1: basic component renders
    expect($('#react-h2').text()).to.equal('Hello world!');

    // test 2: no reactroot
    expect($('#react-h2').attr('data-reactroot')).to.equal(undefined);

    // test 3: Can use function components
    expect($('#arrow-fn-component')).to.have.lengthOf(1);

    // test 4: Can use spread for components
    expect($('#component-spread-props')).to.have.lengthOf(1);

    // test 5: spread props renders
    expect($('#component-spread-props').text(), 'Hello world!');

    // test 6: Can use TS components
    expect($('.ts-component')).toHaveLength(1);

    // test 7: Can use Pure components
    expect($('#pure')).toHaveLength(1);
  });

  it('Includes reactroot on hydrating components', async () => {
    const html = await fixture.readFile('/index.html');
    const $ = cheerio.load(html);

    const div = $('#research');

    // test 1: has the hydration attr
    expect(div.attr('data-reactroot')).to.be.ok;

    // test 2: renders correctly
    expect(div.html()).to.equal('foo bar <!-- -->1');
  });

  it('Throws helpful error message on window SSR', async () => {
    const html = await fixture.readFile('/window/index.html');
    expect(html).to.include(
        `[/window]
    The window object is not available during server-side rendering (SSR).
    Try using \`import.meta.env.SSR\` to write SSR-friendly code.
    https://docs.astro.build/reference/api-reference/#importmeta`
    );
  });

  it('Can load Vue', async () => {
    const html = await fixture.readFile('/index.html');
    const $ = cheerio.load(html);
    expect($('#vue-h2').text()).to.equal('Hasta la vista, baby');
  });

  it('Can use a pragma comment', async () => {
    const html = await fixture.fetch('/pragma-comment/index.html');
    const $ = cheerio.load(html);

    // test 1: rendered the PragmaComment component
    expect($('.pragma-comment')).to.have.lengthOf(2);
  });

  // note(drew): unsure how to update this test?
  it.skip('uses the new JSX transform', async () => {
    const html = await fixture.fetch('/index.html');

    // Grab the imports
    const exp = /import\("(.+?)"\)/g;
    let match, componentUrl;
    while ((match = exp.exec(html))) {
      if (match[1].includes('Research.js')) {
        componentUrl = match[1];
        break;
      }
    }
    const component = await fixture.readFile(componentUrl);
    const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime'));

    // test 1: react/jsx-runtime is used for the component
    expect(jsxRuntime).to.be.ok;
  });
});
*/

it.skip('is skipped', () => {});