Electron + Typescript + React boilerplate

Caio Lucas — Thu, 24 Mar 2022 18:06:21 +0000

Electron + TypeScript + React

You can go to the github repository clicking here;

This boilerplate is using diego3g/electron-typescript-react as base.
If you want something with styled-components, linting and tests with jest, just go there.

Differences between this boilerplate and the diego3g's version

css support added
svg support added
jest removed
eslint removed
styled-components removed

The idea of this boilerplate is to be as simple as it can using this three technologies. My thought is to give the developer maximum freedom to choose their own way to write code.

Installation

Download this boilerplate using

git clone https://github.com/caiulucas/basic-electron-react-typescript

or click on the Use this template option.

Add node_modules in your project

Using npm:

npm install

Using yarn:

yarn

Usage

Just run start script.

Using npm:

npm run start

Using yarn:

yarn start

Packaging

To generate the project package based on the OS you're running on, just run:

Using npm:

npm run package

Using yarn:

yarn package

Contributing

Any pull request or issue is welcome. If you have any idea for this boilerplate, feel free to share it.

If you want to make your own boilerplate using this project as base, just go for it 😃

License

MIT

Tests with Jest and TypeORM

Caio Lucas — Sun, 14 Jun 2020 00:52:14 +0000

Hello Everyone!

So, today I'll show you how to configure your code to make tests with TypeORM and Jest.

Modules

First thing first, let's install some modules in our node environment. I'm using yarn:

yarn add jest ts-jest @types/jest -D

yarn add typeorm typescript pg

Then, let's create our tsconfig file:
yarn tsc --init

Jest configs

Ok, now we need to configure our jest.config.js and there are my conigs:

module.exports = {
  clearMocks: true,
  maxWorkers: 1,
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: [
    '**/__tests__/**/*.[jt]s?(x)',
    '!**/__tests__/coverage/**',
    '!**/__tests__/utils/**',
    '!**/__tests__/images/**',
  ],
};

I like to make a directory named tests in the root of the project to make tests.

TypeORM configs

And I like to create a ormconfig.js. Be comfortable to make a .json or .env.

module.exports = {
  name: 'default',
  type: 'postgres',
  host: 'localhost',
  port: 5432,
  username: 'postgres',
  password: 'postgres',
  database: 'tests',
  dropSchema: true,
  logging: false,
  synchroize: true,
  migrationsRun: true,

  entities: ['src/database/entities/*.ts'],
  migrations: ['src/database/migrations/*.ts'],
  cli: {
    entitiesDir: 'src/database/entities',
    migrationsDir: 'src/database/migrations',
  },
};

So, let the dropSchema: true because this will delete your data after the tests.

I like to let migrationsRun: true to automatically run migrations before the tests.

I'm using postgres, but be comfortable to use your favorite database.

Creating connection file

Let's create a connection.ts to export some functions to run in our tests.

import {createConnection, getConnection} from 'typeorm';

const connection = {
  async create(){
    await createConnection();
  },

  async close(){
    await getConnection().close(); 
  },

  async clear(){
    const connection = getConnection();
    const entities = connection.entityMetadatas;

    entities.forEach(async (entity) => {
      const repository = connection.getRepository(entity.name);
      await repository.query(`DELETE FROM ${entity.tableName}`);
    });
  },
};
export default connection;

The clear method will delete all data for every single entity registered in our connection.

Creating a test

So, in your tests, just put this code:

import connection from '../src/connection';

beforeAll(async ()=>{
  await connection.create();
});

afterAll(async ()=>{
  await connection.close();
});

beforeEach(async () => {
  await connection.clear();
});

it('creates a user', () => {
  // TODO
})

And that's it :)

Github project

If you want to see the full project just click here

DEV Community: Caio Lucas

Electron + Typescript + React boilerplate