michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add test for mdx + React usage (#4174)

Browse source 
* Add test for mdx + React usage

* Add a changeset

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2022-08-05 17:13:30 -04:00 committed by GitHub
parent 14d27c1d6f
commit 8eb3a8c6d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 74 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/metal-dodos-sin.md Normal file
View file

@ -0,0 +1,6 @@
---
'@astrojs/mdx': patch
'@astrojs/react': patch
---
Allows using React with automatic imports alongside MDX

6
packages/integrations/mdx/test/fixtures/mdx-plus-react/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,6 @@
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
export default {
integrations: [react(), mdx()]
}

8
packages/integrations/mdx/test/fixtures/mdx-plus-react/package.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@test/mdx-plus-react",
"dependencies": {
"astro": "workspace:*",
"@astrojs/mdx": "workspace:*",
"@astrojs/react": "workspace:*"
}
}

5
packages/integrations/mdx/test/fixtures/mdx-plus-react/src/components/Component.jsx vendored Normal file
View file

@ -0,0 +1,5 @@
const Component = () => {
return <p>Hello world</p>;
};
export default Component;

11
packages/integrations/mdx/test/fixtures/mdx-plus-react/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,11 @@
---
import Component from "../components/Component.jsx";
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<Component />
</body>
</html>

25
packages/integrations/mdx/test/mdx-plus-react.test.js Normal file
View file

@ -0,0 +1,25 @@
import mdx from '@astrojs/mdx';
import { expect } from 'chai';
import { parseHTML } from 'linkedom';
import { loadFixture } from '../../../astro/test/test-utils.js';
describe('MDX and React', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
root: new URL('./fixtures/mdx-plus-react/', import.meta.url),
});
await fixture.build();
});
it('can be used in the same project', async () => {
const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);
const p = document.querySelector('p');
expect(p.textContent).to.equal('Hello world');
});
});

7
packages/integrations/react/src/index.ts
View file

@ -12,10 +12,9 @@ function getRenderer() {
: '@astrojs/react/server-v17.js',
jsxImportSource: 'react',
jsxTransformOptions: async () => {
const {
default: { default: jsx },
// @ts-expect-error types not found
} = await import('@babel/plugin-transform-react-jsx');
// @ts-expect-error types not found
const babelPluginTransformReactJsxModule = await import('@babel/plugin-transform-react-jsx');
const jsx = babelPluginTransformReactJsxModule?.default?.default ?? babelPluginTransformReactJsxModule?.default;
return {
plugins: [
jsx(

10
pnpm-lock.yaml
View file

@ -2220,6 +2220,16 @@ importers:
'@astrojs/mdx': link:../../..
astro: link:../../../../../astro
packages/integrations/mdx/test/fixtures/mdx-plus-react:
specifiers:
'@astrojs/mdx': workspace:*
'@astrojs/react': workspace:*
astro: workspace:*
dependencies:
'@astrojs/mdx': link:../../..
'@astrojs/react': link:../../../../react
astro: link:../../../../../astro
packages/integrations/netlify:
specifiers:
'@astrojs/webapi': ^0.12.0