import React from 'react';
import { pure } from 'recompose';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  align-items: center;
`; // ... 何かスタイルを定義

export type Props = {
  title: string;
};

export const Test = ({ title }: Props) => (
  <Wrapper>
    <h1>{title}</h1>
  </Wrapper>
);

export default pure(Test);

このとき、 props.title に渡した値が正しくレンダリングされることをテストしたいとします。あまり深く考えず次のようなテストコードを書いてみます。

import React from 'react';
import { shallow } from 'enzyme';

import Test, { Props } from '@app/components/Test';

describe('<Test>', () => {
  let props: Props;

  beforeEach(() => {
    props = {
      title: 'title'
    };
  });

  describe('rendering', () => {
    it('should render title', () => {
      const wrapper = shallow(<Test {...props} />);

      const h1 = wrapper.find('h1');
      expect(h1.text()).toEqual(props.title);
    });
  });
});

これを実行すると

Method “text” is meant to be run on 1 node. 0 found instead.

とエラーが出てテストにfailします。

shallowで <Test /> をレンダリングしているところをデバッグしてみます。

console.log test/components/CollectionRegister/SRHeader/test.spec.tsx:20
    <Component title="title" />

Wrapper がレンダリングされていることはわかります（ Component という表示で Wrapper と実際の名前は出ていない）が、その先の <h1> 以降がレンダリングされていないようです。ここで、enzymeの dive() を使います。

describe('rendering', () => {
  it('should render title', () => {
    const wrapper = shallow(<Test {...props} />);

    const h1 = wrapper.dive().find('h1'); // changed
    expect(h1.text()).toEqual(props.title);
  });
});

これを実行してみます。

PASS  test/components/test.spec.tsx
  <Test>
    rendering
      ✓ should render title (18ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.945s, estimated 3s
Ran all test suites matching /test\/components\/test.spec.tsx/i.
✨  Done in 4.01s.

無事テストがパスしました。

ちなみに先ほどのコンポーネントを console.log(wrapper.dive().debug()); でデバッグすると次のように出力されます。

console.log test/components/test.spec.tsx:20
  <styled.div>
    <h1>
      title
    </h1>
    &gt;
  </styled.div>

<Test /> でレンダリングしているコンポーネントが正しく出力されています。

styled-components jest enzyme test などで検索しましたが英語のページばかりで日本語のページが見つけられなかったので逆引きとして使えるように書いてみました。
英語の習熟の大事さをひしひしと感じます。

2019-06-21

スタートアップの採用って何をやっているの？

採用担当をしています。

最近採用していると言うとスタートアップの会社はどんな採用活動をするの？っていう聞かれることがあるので、今日は少し採用担当が何をやっているか話します。

2019-06-19

AWS Summit Tokyo 2019 参加レポ【後編】

author:消火器

こんにちは。エンジニアの消火器です。

ちょうど一週間前の今日、 6月12日(水)〜14日(金)に幕張メッセで「AWS Summit Tokyo 2019」が開催されました。

aws.amazon.com

今回はその参加レポート後編になります。前編は@mikan3rdさんにより書かれたこちらの記事になります。

pathee.hatenablog.com

AWS経験について自分自身としては大きな運用経験は全くないのですが、 AWS様が運営するAWS loft TOKYOのAsk An Expert カウンターを利用させていただいて、自社のやりたいことと現状、そこからどう理想に近づいていくかの話を丁寧にしていただいたのが記憶に新しいです。

今回はAWSの知見を得るために「AWS Summit行きたい…」とぼそっと社内で言ったところ、OKをいただき参加させていただいた次第です。

Pathee engineering blog

世界をしなやかに変えるエンジニアたちのブログ

Pathee的システムリプレイスの道程

Pathee Advent Calander!

【Golang】Goaのv3を使う - コンテナイメージの作成

【スクラム開発】Doneの定義を作ろう

SwiftUIのチュートリアルをやってみたその１(基本操作・リスト表示)

styled-componentsで作ったコンポーネントをjest + enzymeでテストする時は dive() を使う

スタートアップの採用って何をやっているの？

AWS Summit Tokyo 2019 参加レポ【後編】