Dynamic-scoped workspace for changed components on CI and config reuse #6038

501NotImplemented · 2024-07-05T12:13:50Z

501NotImplemented
Jul 5, 2024

Hi. I am looking for some best practices/ideas on how to define the scope for running the Vitest tests for a changed components in PR on the CI level.
As of now, I have the following structure:

Repo
-- vitest.config.ts
-- vitest.workspace.ts
---Lib
----CustomConfigs
-----vitest.config.ts
----Components
-----Footer
------vitest.config.ts
------setupTests.ts
-----Header
------vitest.config.ts
------setupTests.ts

I have a root vitest config, a workspace file with two projects, where I dynamically populate the include property, based on the changed components in the feature branch.

import { defineWorkspace } from 'vitest/config';
export default defineWorkspace([
    {
        extends: './vitest.config.ts',
        test: {
            name: 'changedComponents',
            include: [],
            environment: 'jsdom',
        },
    },
    {
        extends: './vitest.config.ts',
        test: {
            name: 'allComponents',
            include: ['**/*.test.{js,ts,tsx}'],
            environment: 'node',
        },
    },
]);

The tests, that I want to run are using Vitest and React Testing Library. The components are located in Lib/CustomComponents directory and each of the components has it's own vitest.config.ts file, where the output file is customized. Each of the components vitest.config.ts file is referencing the shared config, located in Lib/CustomConfigs.
Each component has the setupTests.ts file, where the JSDom is referenced and/or mocked.

e.g.

import '@testing-library/jest-dom/vitest';
import { JSDOM } from 'jsdom';

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js',
};


global.requestAnimationFrame = (callback) => {
    return setTimeout(callback, 0);
};

global.cancelAnimationFrame = (id) => {
    clearTimeout(id);
};

These setup files are called from the components vitest.config.js and are defined in a setupFiles property

import { mergeConfig, defineProject } from 'vitest/config';
import path from 'path';
import { sharedConfig } from '../../CustomConfigs/vitest'

export default mergeConfig(sharedConfig, defineProject({
    test: {
        setupFiles: ['./setupTests.ts'],
        reporters: [
            'default',
            [
                'junit',
                {
                    outputFile: path.join(__dirname, '../../../..', 'lib-test-results', 'Footer_junit.xml'),
                },
            ],
        ],
    },
}));

When running the tests for the specific component from it's terminal - everything works as expected, the setup files are taken into account, the configs are resolved and tests are green.
But when I run the tests for the changed projects by calling vitest --project=changedComponents, the tests are failing because jest-dom assertions are not resolved, since setup files are not executed. I assume that components vitest.config.ts files are ignored.
Error: Invalid Chai property: toHaveClass

Any ideas how to merge the custom component's configs with the dynamic workspace configuration?

The thing is I'm not restricted to using the workspace, but I thought it would be more convenient and clear way to execute the tests.
Is it possible to dynamically form the include flag and pass it as a CLI argument to vitest, so the component's configs and executable environment would be used? e.g.

vitest Lib/Components/Footer, Lib/Components/Header, OtherLib/Util

sheremet-va · 2024-07-05T12:59:03Z

sheremet-va
Jul 5, 2024
Maintainer

Can't you just use --changed flag? https://vitest.dev/guide/cli.html#options

1 reply

501NotImplemented Jul 5, 2024
Author

Nope, unfortunately it doesn't work for my case. I have a huge monorepo where most of the tests are using jest as a unit testing framework, and we just started migration to Vitest.
running pnpm vitest --changed fails, since it can't parse the jest files.

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

The migration scope is quite big, to convert all of the tests at once, so we do it in chunks.
That's one of the reasons why we have that custom logic, at least while the migration is not fully completed. We detect the change scope, and depending on the unit testing framework used - we form the test run scope, that is passed to appropriate command.
In case of jest - we write a custom config with a test scope, which we later pass as an argument to the command, e.g.

pnpm jest --jest-generated.config.json

As for the vitest, i decided to use the workspace as an alternative. But it has the already mentioned issues.

I've tried passing the relative path to the vitest command, like

pnpm vitest Lib/Components/Footer

and it looks like the config file from the repo root is utilized in that case, the component configs do not take effect, if I run the command from the repo terminal.
Any ideas how to make it work?

Basically I can call the script passing the path to components, but will it use the executable environment set in their custom configs and will the setup files be called?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic-scoped workspace for changed components on CI and config reuse #6038

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Dynamic-scoped workspace for changed components on CI and config reuse #6038

501NotImplemented Jul 5, 2024

Replies: 1 comment · 1 reply

sheremet-va Jul 5, 2024 Maintainer

501NotImplemented Jul 5, 2024 Author

501NotImplemented
Jul 5, 2024

Replies: 1 comment 1 reply

sheremet-va
Jul 5, 2024
Maintainer

501NotImplemented Jul 5, 2024
Author