![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
astro-component-tester
Advanced tools
Readme
Utility to help you write tests for your Astro components. In essence, what it does is create a temporary empty Astro project with only the selected component in a src/pages/index.astro
file, then it builds it using the Astro CLI and finally, it returns the output of that build
While it's intended to be used when writing tests, you could also use it outside of that usecase, for instance to build a single component 😄
Part of astro-component-template
Examples below uses Mocha and Chai for convenience but this should work with any tools
import { expect } from 'chai';
import { getComponentOutput } from 'astro-component-tester';
describe('Component', async () => {
let component;
// Component content here is equal to simply <div>Hello</div>
before(async () => {
component = await getComponentOutput('./src/Component.astro');
});
it('example component should say hello', () => {
expect(component.html).to.contain('Hello');
});
});
You can also pass props to the component, using the following method:
---
const { mySuperProp } = Astro.props
---
<div>{ mySuperProp + 1 }</div>
import { expect } from 'chai';
import { getComponentOutput } from 'astro-component-tester';
describe('Component', async () => {
let component;
before(async () => {
component = await getComponentOutput('./src/Component.astro', { mySuperProp: 1 });
});
it('example component should return 2', () => {
expect(component.html).to.contain(2);
});
});
Through a third parameter to getComponentOutput
, it's possible to pass settings to the build operation, this is also how you can pass options to Astro itself, for instance, to test the output of a component that uses a Svelte component:
import { expect } from 'chai';
import { getComponentOutput } from 'astro-component-tester';
describe('Component', async () => {
let component;
before(async () => {
component = await getComponentOutput('./src/Component.astro', {}, { astroOptions: { renderers: ['@astrojs/renderer-svelte'] } });
});
it('example component should say hello using a Svelte component', () => {
expect(component.html).to.contain('Hello from Svelte');
});
});
Since this work by building the component in an isolated environment, any variables depending on a specific context will be lost. For instance, Astro.request
will always return the index page. Presumably, if you're building a component that should work in any instance, this wouldn't be an issue but it could become one for some components.
At the moment, astro-component-tester
does not support any kind of mocking for supporting that use case
FAQs
Utility to test Astro components
The npm package astro-component-tester receives a total of 9 weekly downloads. As such, astro-component-tester popularity was classified as not popular.
We found that astro-component-tester demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.