tests as docs: split snapshot files to make test outputs better accessible
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 671
- PR merge metrics
- No merged PRs in 30d
Description
actual:
test inputs are stored in separate files with `tsx` file extension
test outputs (snapshots) are stored in one file per framework with `snap` file extension
expected:
test outputs should be stored in separate files with `tsx` file extension
test output files should have a similar file path as test input files
why:
help with porting components to mitosis
so the test outputs are accessible via the github blob API
so its easier to `grep` for a desired output, for example `createEffect` in solid
alternative:
postprocess the `snap` files and generate pretty html docs
with side-by-side comparisons of input and output code
similar to https://party.sveltosis.dev/
jest issue: https://github.com/facebook/jest/issues/2676
possible solution: `toMatchSpecificSnapshot` from `jest-specific-snapshot`
storybook: https://github.com/storybookjs/storybook/pull/1584
typescript-eslint: https://github.com/typescript-eslint/typescript-eslint/pull/2290
example
input [`packages/core/src/__tests__/data/advanced-ref.raw.tsx`](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/__tests__/data/advanced-ref.raw.tsx)
```tsx
import { useStore, useRef, onUpdate } from '@builder.io/mitosis';
export interface Props {
showInput: boolean;
}
export default function MyBasicRefComponent(props: Props) {
const inputRef = useRef(null);
const inputNoArgRef = useRef(null);
const state = useStore({
name: 'PatrickJS',
});
function onBlur() {
// Maintain focus
inputRef.focus();
}
function lowerCaseName() {
return state.name.toLowerCase();
}
onUpdate(() => {
console.log('Received an update');
}, [inputRef, inputNoArgRef]);
// ...
```
output for solid is stored in [`packages/core/src/__tests__/__snapshots__/solid.test.ts.snap`](https://github.com/BuilderIO/mitosis/raw/main/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap)
```
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Solid Javascript Test AdvancedRef 1`] = `
"import { Show, on, createEffect, createSignal } from \\"solid-js\\";
import { css } from \\"solid-styled-components\\";
function MyBasicRefComponent(props) {
const [name, setName] = createSignal(\\"PatrickJS\\");
function onBlur() {
// Maintain focus
inputRef.focus();
}
function lowerCaseName() {
return name().toLowerCase();
}
let inputRef;
let inputNoArgRef;
function onUpdateFn_0() {
console.log(\\"Received an update\\");
}
createEffect(on(() => [inputRef, inputNoArgRef], onUpdateFn_0));
// ...
```
test runner [`packages/core/src/__tests__/shared.ts`](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/__tests__/shared.ts)
```ts
const ADVANCED_REF: Tests = {
AdvancedRef: getRawFile('./data/advanced-ref.raw'),
};
```
snapshot is compared in `toMatchSnapshot`
```ts
testsArray.forEach((tests) => {
Object.keys(tests).forEach((key) => {
test(key, () => {
const component = parseJsx(tests[key], { typescript: options.typescript });
const getOutput = () => generator(options)({ component, path });
try {
expect(getOutput()).toMatchSnapshot();
} catch (error) {
expect(getOutput).toThrowErrorMatchingSnapshot();
}
});
});
});
```
Contributor guide
Research direction
Start with packages/core/src/__tests__/shared.ts and the input file packages/core/src/__tests__/data/advanced-ref.raw.tsx, then inspect the current snapshot at packages/core/src/__tests__/__snapshots__/solid.test.ts.snap. Trace the toMatchSnapshot test runner and compare the proposed per-input output layout. Done means generated outputs use separate .tsx files with paths corresponding to their inputs and the relevant tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing-qa
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100