Skip to content

Commit

Permalink
chore: modularize repository into several packages
Browse files Browse the repository at this point in the history
  • Loading branch information
acostalima committed Jun 15, 2020
1 parent c166020 commit 235c105
Show file tree
Hide file tree
Showing 65 changed files with 9,220 additions and 5,857 deletions.
15 changes: 15 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[{*.md,*.snap}]
trim_trailing_whitespace = false

[package.json]
indent_size = 2
27 changes: 27 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Contributing

This repository follows a _monorepo_ structure, for which we use [lerna](https://lerna.js.org) to manage versions of changed packages, as well as the release and publishing process.

To learn more about what commands are available for lerna, how it works and how it can be configured, please check out [lerna's repository](https://github.com/lerna/lerna/).

It's relevant to note, though, that the main workflow using lerna has already been setup as _npm-scripts_, which means that you should not need to use lerna commands while contributing.

## Tests

In order to test all packages, you simply need to run the following command:

```sh
$ npm run test
```

## Release and publish

To release and publish the packages in which changes have been made, run:

```sh
$ npm run release
```

❗️ **IMPORTANT** : do not try to release a single package from that package's root directory. _Lerna_ takes care of figuring out which packages have suffered changes and only releases and publishes the updated packages. Please use the release scripts provided in the repository's root `package.json`.

We are using _lerna_ in fixed version mode, which means that when multiple packages are changed between releases, they will all be updated to the same version. We also use [_conventional-commits_](https://www.conventionalcommits.org), which means the subject of the commit messages will decide the version bump that will occur.
39 changes: 39 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Migration guide

The previous package that existed in this repository, `@moxy/jest-config`, has been deprecated. To learn how to migrate into the new configuration structure, read below.

## Migrating from <= 4.2.1

Until v4.2.1, you would have to import `@moxy/jest-config` to apply the **base** configuration and the **enhancers** you wished to use (`withWeb`, `withReactNative`, `withRTL`, ...).

Your `jest.config.js` would look similar to this:

```js
const { compose, baseConfig, withWeb, withRTL } = require('@moxy/jest-config');

module.exports = compose(
baseConfig(),
withWeb(),
withRTL(),
);
```

Now, the package has been refactored into a **base** configuration package and several **enhancer** packages (more info on what packages exist and how to use them is in this repository's [README](README.md)). Enhancer APIs were not subject to any breaking changes during this process.

For example, the example given above would look like this after migrating to the newest version:

```js
const { compose, baseConfig } = require('@moxy/jest-config');
const withWeb = require('@moxy/jest-config-web');
const { withRTL } = require('@moxy/jest-config-testing-library');

module.exports = compose(
baseConfig(),
withWeb(),
withRTL(),
);
```

## New features

In addition to the previously existing `withRTL` enhancer, `@moxy/jest-config-testing-library` now offers a `withNTL` enhancer for React Native apps that use [Native Testing Library (NTL)](https://github.com/testing-library/native-testing-library) framework for testing.
192 changes: 82 additions & 110 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,143 +1,115 @@
# jest-config

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
[![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url]

[npm-url]:https://npmjs.org/package/@moxy/jest-config
[downloads-image]:https://img.shields.io/npm/dm/@moxy/jest-config.svg
[npm-image]:https://img.shields.io/npm/v/@moxy/jest-config.svg
[build-status-url]:https://github.com/moxystudio/jest-config/actions
[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/jest-config/Node%20CI/master
[codecov-url]:https://codecov.io/gh/moxystudio/jest-config
[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/jest-config/master.svg
[david-dm-url]:https://david-dm.org/moxystudio/jest-config
[david-dm-image]:https://img.shields.io/david/moxystudio/jest-config.svg
[david-dm-dev-url]:https://david-dm.org/moxystudio/jest-config?type=dev
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/jest-config.svg

MOXY's Jest configuration to be used across several JavaScript projects.
MOXY's set of [Jest](https://jestjs.io/) configuration packages to be used across several JavaScript projects.

## Installation
## How it works

```sh
$ npm install --save-dev jest @moxy/jest-config
```
This package contains two sets of Jest configurations to be used in JavaScript projects:

## How it works
- the **base** configuration, which defines standard settings to be shared by all projects.
- the **enhancers**, which contain settings targeted to specific testing frameworks and enviroments, such as: browsers, React Native, Enzyme, Testing Library, etc..

This package contains a **base** configuration and a set of **enhancers**. You may combine them to configure Jest for different types of projects.
For more information on how to use each package and their respective configurations, please refer to the READMEs by following the links below. You may also check the examples listed in [Typical configs](#typical-configs) below to see learn how the packages may be combined for the most common scenarios.

### Base config

`baseConfig` is the base point of this configuration. It includes all defaults offered by [`jest-config`](https://jestjs.io/docs/en/configuration#defaults), and has project agnostic configurations, meant to help any project regardless of their purpose, including:
The base config is published as [`@moxy/jest-config-base`](packages/jest-config-base). Check out its README to learn how to use it.

- **Test match**: Tweaks `testMatch` so that only files named `test.js` or files ending with `.test.js` are considered test files, even if they are inside `__tests__` or any other folder.
- **Test path ignore patterns**: Tweaks `testPathIgnorePatterns` to ignore common folders, such as `docusaurus`.
- **Transform**: Enables Babel so that [`jest.mock()`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options) and similar functions are automatically hoisted to the top. If your project uses Babel, its config will be read and used to transpile code.
- **Coverage**: Enables coverage for CI, a feature supported by [`ci-info`](https://github.com/watson/ci-info), which you can check for information about supported CI services.
- **Coverage thresholds**: For a good balance between strict but workable thresholds.
- **Snapshot serializing**: To remove absolute paths from your snapshots, reducing conflicts in CI.

### Enhancers
### Enhancer configs

There are several **enhancer** packages, which are intended to be used in conjunction with the **base** configuration:

- [`withWeb`](lib/enhancers/web/) - Adds setup for Web projects.
- [`withReactNative`](lib/enhancers/react-native/) - Adds setup for [React Native](https://reactnative.dev/) projects.
- [`withRTL`](lib/enhancers/testing-library/#withrtl) - Adds setup for projects using [Testing Library](https://testing-library.com).
- [`withEnzymeWeb`](lib/enhancers/enzyme/#withenzymeweb) & [`withEnzymeReactNative`](lib/enhancers/enzyme/#withenzymereactnative) - Adds setup for projects using [Enzyme](https://github.com/airbnb/enzyme).

## Usage

Create `jest.config.js` at the root of your project:

```js
const { baseConfig } = require('@moxy/jest-config');

module.exports = baseConfig();
```

The `baseConfig` function accepts a optional parameter that allows to specify the Jest environment, which can be `jsdom` (default) or `node`. As an example, for Node.js projects you would use like so:
- [`@moxy/jest-config-web`](packages/jest-config-web) - If you're developing a web project.
- [`@moxy/jest-config-react-native](packages/jest-config-react-native) - If you're developing a [React Native](https://reactnative.dev/) app.
- [`@moxy/jest-config-enzyme](packages/jest-config-enzyme) - If you're using [Enzyme](https://enzymejs.github.io/enzyme/) framework.
- [`@moxy/jest-config-testing-library](packages/jest-config-testing-library) - If you're using [React Testing Library (RTL)](https://github.com/testing-library/react-testing-library) or [Native Testing Library (NTL)](https://github.com/testing-library/native-testing-library) frameworks.

```js
const { baseConfig } = require('@moxy/jest-config');

module.exports = baseConfig('node');
```

Alternatively, you may pass a path to a custom environment. In fact, we offer the following custom environments:
# Typical configs

<details>
<summary><code>@moxy/jest-config/environments/node-single-context</code></summary>

Special Node environment class for Jest which runs all scripts in the same context. This effectively disables the sandbox isolation to circumvent issues with Jest's [sandboxing](https://github.com/facebook/jest/issues/2549), which causes subtle bugs in specific situations, such as in code that relies in `instanceof` checks.

```js
const { baseConfig } = require('@moxy/jest-config');
<summary>Node.js project</summary>

module.exports = baseConfig('@moxy/jest-config/environments/node-single-context');
```

> ⚠️ Only activate this environment if you are having problems with the aforementioned issue, and before trying other workarounds.
```js
const { baseConfig } = require('@moxy/jest-config-base');

module.exports = baseConfig('node');
```
</details>

### Composing enhancers

To use enhancers, use the `compose` function that comes with this package. **Keep in mind**, the first item should always be the base configuration! Here's an example of using `compose`:

```js
const { compose, baseConfig, withWeb, withRTL } = require('@moxy/jest-config');

module.exports = compose(
baseConfig(),
withWeb(),
withRTL(),
);
```

You may also use `compose` to add your own inline enhancer:

```js
const { compose, baseConfig } = require('@moxy/jest-config');

module.exports = compose(
baseConfig(),
(config) => ({
...config,
// Do not test `.data.js` files
testPathIgnorePatterns: [
...config.pathIgnorePatterns,
'/.*.data.js$/'
];
}),
);
```

### Without compose

If you want to modify the base config without using `compose`, you may change the config imperatively like so:

```js
const { baseConfig } = require('@moxy/jest-config');

const config = baseConfig();
<details>
<summary>Web project with Enzyme</summary>

```js
const { compose, baseConfig } = require('@moxy/jest-config-base');
const withWeb = require('@moxy/jest-config-web');
const { withEnzymeWeb } = require('@moxy/jest-config-enzyme');

module.exports = compose(
baseConfig(),
withWeb(),
withEnzymeWeb('enzyme-adapter-react-16'),
);
```
</details>

// Do not test `.data.js` files
config.testPathIgnorePatterns = [
...config.testPathIgnorePatterns,
'/.*.data.js$/'
];
<details>
<summary>Web project with RTL</summary>

```js
const { compose, baseConfig } = require('@moxy/jest-config-base');
const withWeb = require('@moxy/jest-config-web');
const { withRTL } = require('@moxy/jest-config-testing-library');

module.exports = compose(
baseConfig(),
withWeb(),
withRTL(),
);
```
</details>

module.exports = config;
```
<details>
<summary>React Native project with Enzyme</summary>

```js
const { compose, baseConfig } = require('@moxy/jest-config-base');
const withReactNative = require('@moxy/jest-config-react-native');
const { withEnzymeNative } = require('@moxy/jest-config-enzyme');

module.exports = compose(
baseConfig(),
withReactNative(),
withEnzymeNative('enzyme-adapter-react-16'),
);
```
</details>

## Tests
<details>
<summary>React Native project with NTL</summary>

```js
const { compose, baseConfig } = require('@moxy/jest-config-base');
const withReactNative = require('@moxy/jest-config-react-native');
const { withNTL } = require('@moxy/jest-config-testing-library');

module.exports = compose(
baseConfig('node'),
withReactNative(),
withNTL(),
);
```
</details>

Any parameter passed to the `test` command is passed down to Jest.
## Older versions

```sh
$ npm t
$ npm t -- --watch # To run watch mode
```
If you want to read the change log of an older version, please check [here](https://github.com/moxystudio/jest-config/blob/v4.2.1/CHANGELOG.md).

## License

Expand Down
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
'use strict';

module.exports = require('./lib').baseConfig();
module.exports = require('./packages/jest-config-base').baseConfig();
21 changes: 21 additions & 0 deletions lerna.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"packages": [
"packages/*"
],
"version": "5.0.0",
"command": {
"bootstrap": {
"hoist": true
},
"version": {
"conventionalCommits": true,
"changelogPreset": "conventionalcommits",
"message": "chore(release): %v"
}
},
"ignoreChanges": [
"**/?(*.)test.js",
"**/__mocks__/**",
"**/*.md"
]
}
14 changes: 0 additions & 14 deletions lib/enhancers/index.js

This file was deleted.

40 changes: 0 additions & 40 deletions lib/enhancers/react-native/README.md

This file was deleted.

Loading

0 comments on commit 235c105

Please sign in to comment.