
JavaScript のテストフレームワーク[Jest](https://jestjs.io/en/)の小ネタです。

最近 react や react-native のプロジェクトでモジュールの参照に alias を使うことが多いのですが、Jest でこれを扱う方法について紹介です。

## alias を使ったモジュール参照

alias を使ったモジュール参照とは、プロジェクト内の特定のディレクトに別名(alias)をつけることで、`import`文の記述を簡単にすることです。

例えば、次のような相対パスでモジュールを import している箇所に alias を使ってみましょう。

```ts
// greet.ts は src/shared/services にあるとする
import { greet } from "../../../greet.ts";
```

alias を使う場合は、まず`src/shared`に`Shared`という alias をつけます。そうすると次のように相対パスを除いて書くことができます。

```ts
// Shared は src/shared を参照している
import { greet } from "Shared/services/greet.ts";
```

alias を使うメリットとしては、`import`文の記述を簡略化することもあるますが、相対パスを使った場合よりリファクタなどの変更に強いことが挙げられます。

## moduleNameMapper を使って alias を扱う

Jest で alias を扱うためには`moduleNameMapper`を使って alias と実際のパスをマッピングします。

- <https://jestjs.io/docs/en/configuration#modulenamemapper-object-string-string>

上の例の場合は次のようになります。

```js
module.exports = {
  moduleNameMapper: {
    "^Shared(.*)$": "<rootDir>/src/shared/$1",
  },
};
```

これで Jest でも、alias を使ったモジュール参照があるプロジェクトをテストすることができました。


Jestでaliasを使ったモジュール参照を扱う

ニッチ過ぎて誰得なのか全くわからないのですが、同じようなことで苦しめられるであろう**未来の誰かのため**に、ここに手がかりを残しておきます。



> 正直このあたりのライブラリの変化が早過ぎるので、この情報がいつ風化するかわからないのだけれど。。。

## はじめに

詰まるところ[create-react-app](https://github.com/facebookincubator/create-react-app)をベースに React アプリを作っているのですが、Redux の`connect`を使っているコンポーネントをテストする際に、次のようなエラーが出ました。

これの解決方法を残しておきます。

```
Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined
```

> <https://github.com/reactjs/redux/blob/master/docs/recipes/WritingTests.md#connected-components>

> これを読むと書いてあるんですが、redux store と一緒テストをする場合は、`<Provider>`でラップする必要があります。

今回は、redux store と切り離して純粋なコンポーネントとしてテストする場合の解決方法です。

## サンプルコード

例えば、こんなコードです。(ラフに書いたので、このままだと動かないかも)

Component.jsx

```
import React from 'react';
import { connect } from 'react-redux';

class Component extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

const mapStateToProps = (state) => {
  name: state.name,
};

const wrappedComponent = connect(mapStateToProps)(Component);

export default wrappedComponent;
```

Component.spec.jsx

```
import * as React from 'react';
import { shallow } from 'enzyme';
import Component from './Component';

describe('Test Component', () => {
  it('何かのテスト', () => {
    ...
  });
});
```

## 解決方法

上のやり方では、`Component.jsx`の default export が connect でラップされたコンポーネントなので、上のエラーが発生していました。

コンポーネント自体を connect なしでテストするためには、connect でラップされたものの他に、コンポーネント自体も export する必要があります。

このコンポーネントをテストで利用します。これでエラーも発生しません。

Component.jsx

```diff
- class Component extends React.Component {
+ export class Component extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}
```

Component.spec.jsx

```diff
import * as React from 'react';
import { shallow } from 'enzyme';
+ import { Component } from './Component';
- import Component from './Component';

describe('Test Component', () => {
  it('何かのテスト', () => {
    ...
  });
});
```

## まとめ

まず、公式ドキュメントに目を通せ！ということでした。

- <https://github.com/reactjs/redux/blob/master/docs/recipes/WritingTests.md#connected-components>

でも、実際に一度困ってみないと、言っている意味がわからないものですねー。

Tag: jest

Jestでaliasを使ったモジュール参照を扱う

react-reduxのconnectを使ったコンポーネントをテストする時にInvariant Violationが発生して困っている人のためのヒント