Skip to main content

child-app

Helpers library for writing unit tests for tramvai child-app

Uses @tramvai/test-unit under hood to create test root-app that will wrap child-app.

How to

Test child-app main component render

You can get React Component returned by child-app from return value of testChildApp function and use for example testComponent helper from the @tramvai/test-react

warning

To properly render child-app component pass as props to it its di and optionally props object, that will be passed to the underlying child-app component.

import { testComponent } from '@tramvai/test-react';
import childApp from './child-app.tsx';

(async () => {
const {
childApp: { Component, di },
close,
} = await testChildApp(childApp);
const { render } = testComponent(<Component di={di} props={{ test: 'abc' }} />);

expect(render.getByTestId('from-root').textContent).toBe('Value from Root: abc');
})();

Test child-app di

import childApp from './child-app.tsx';

(async () => {
const {
childApp: { di },
close,
} = await testChildApp(childApp);

expect(di.get(CHILD_APP_BASE_TOKEN)).toBe("I'm little child app");
})();

More examples

/**
* @jest-environment jsdom
*/
import { testComponent } from '@tramvai/test-react';
import { testChildApp } from './testChildApp';
import BaseChildApp, { CHILD_APP_BASE_TOKEN } from './__fixtures__/base';

describe('test/childApp/testChildApp', () => {
it('base test', async () => {
const {
childApp: { di, Component },
close,
} = await testChildApp(BaseChildApp);
const { render, rerender } = testComponent(
<Component di={di} props={{ fromRoot: 'test123' }} />
);

expect(render.getByTestId('token').textContent).toBe("Children App: I'm little child app");
expect(render.getByTestId('from-root').textContent).toBe('Value from Root: test123');

expect(di.get(CHILD_APP_BASE_TOKEN)).toBe("I'm little child app");

rerender(<Component di={di} props={{ fromRoot: 'root' }} />);

expect(render.getByTestId('from-root').textContent).toBe('Value from Root: root');

return close();
});
});