Skip to content

Commit

Permalink
chore(docs): add paths to unit-testing using typescript (#28029)
Browse files Browse the repository at this point in the history
  • Loading branch information
talohana authored Mar 1, 2021
1 parent a579266 commit ac77db4
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions docs/docs/how-to/testing/unit-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,36 @@ const babelOptions = {

Once this is changed, you can write your tests in TypeScript using the `.ts` or `.tsx` extensions.

### Using tsconfig paths

If you are using [tsconfig paths](https://www.typescriptlang.org/tsconfig#paths) there is a single change to your config.

1. Add [ts-jest](https://github.com/kulshekhar/ts-jest)

```shell
npm install --save-dev ts-jest
```

2. Update `jest.config.js` to import and map `tsconfig.json` paths

```js:title=jest.config.js
const { compilerOptions } = require("./tsconfig.json")
const { pathsToModuleNameMapper } = require("ts-jest/utils")
const paths = pathsToModuleNameMapper(compilerOptions.paths, {
prefix: "<rootDir>/",
})
```

3. Add paths to `jest.config.js` moduleNameMapper

```js:title=jest.config.js
moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/tests/file-mock.js`,
...paths,
},
```

## Other resources

If you need to make changes to your Babel config, you can edit the config in
Expand Down

0 comments on commit ac77db4

Please # to comment.