takahirohonda

.scalableSvg {
  width: 100%;
  height: auto;
  display: block;
}

takahirohonda

.small {
  width: 57px;
  height: 57px;
}

.medium {
  width: 114px;
  height: 114px;
}

takahirohonda

import React from 'react';
import styles from './styles.scss';

export enum IllustrationSize {
  Small = 'small',
  Medium = 'medium',
  Large = 'large',
}

export type IllustrationContainerProps = {

takahirohonda

// mock async function first
const someAsyncFunc = jest.fn().mockResolvedValue({ success: true });
jest.spyOn(hooks, 'someHook').mockImplementation(() => ({ someAsyncFunc }));

...

await act(async() => {
  wrapper
    .findWhere((node) => node.text() === 'Elenberg Fraser')
    .find('button')

takahirohonda

export const MyButton = () => {
  const { someAsyncFunc } = someHook();

  const handleClick = () => {
    await someAsyncFunc();
    window.open(link, '_blank');
  }

  return (
    <button role="link" onClick={handleClick}>

takahirohonda

const getAnimal = (sound) => {
  switch(sound) {
    case 'meow':
      return 'Cat';
    case 'woof':
      return 'Dog';
    case 'pawoo':
      return 'Elephant';
    default:
      return 'Human';

takahirohonda

<style>
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Lato/Lato-Regular.ttf') format('truetype');
}

.custom-font {
  font-family: 'Lato';

takahirohonda

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {
  // fonts
  config.plugins.push(
    new CopyWebpackPlugin({patterns: [
      { 
        from: path.resolve(__dirname, '../src/fonts/Lato'),
        to: 'fonts/Lato' 
      },

takahirohonda

import React from 'react';
import { mount, shallow } from 'enzyme';
import Wrapper from '.';

describe('<Wrapper />', () => {
  test('renders with correct className with mount', () => {
    const wrapper = mount(<Wrapper>Children here</Wrapper>);
    console.log(wrapper.debug());
    expect(wrapper.find('div').hasClass('wrapper')).toBeTruthy();
  });

takahirohonda

<div className="wrapper">
  Children here
</div>