BuilderIO / BuilderIO/mitosis

tests as docs: split snapshot files to make test outputs better accessible

Open
#856 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.