Forem: Yoshihiro Nakamura

Just one line code that will cleanup your jsx

Yoshihiro Nakamura — Tue, 12 Oct 2021 09:14:59 +0000

You might have seen the code like:

function Profile() {
  const [res] = useQuery({ query: GetCurrentUser })

  return (
    <div>
      {res.fetching && <Spinner />}
      {res.error && <p>error</p>}
      {res.data?.currentUser && (
        <div>
          <Avatar name={res.data.currentUser.name} size="l" />
          <p>{res.data.currentUser.name}</p>
          <p>{res.data.currentUser.email}</p>
          <p>{res.data.currentUser.age}</p>
        </div>
      )}
    </div>
  )
}

Here, res.data.currentUser is used over time. How can we make it cleaner?

Extracting to another component (e.g. ProfileCard) is definitely a solution. But sometimes we want to keep it in one component.

Or you can reassign it to a variable:

function Profile() {
  const [res] = useQuery({ query: GetCurrentUser })

  if (res.fetching) return <Spinner />

  if (res.error || !res.data) return <p>error</p>

  const { currentUser } = res.data

  return (
    <div>
      {currentUser && (
        <div>
          <Avatar name={currentUser.name} size="l" />
          <p>{currentUser.name}</p>
          <p>{currentUser.email}</p>
          <p>{currentUser.age}</p>
        </div>
      )}
    </div>
  )
}

Looks better, but you should change the other things like res.fetching and res.error (otherwise TypeScript gonna shout at you). And sometimes we want render h1 without waiting response from api.

better approarch: fromObject

So what we wanted to achieve in the first place?

{res.data?.currentUser && (
  <div>
    <Avatar name={res.data.currentUser.name} size="l" />
    <p>{res.data.currentUser.name}</p>
    <p>{res.data.currentUser.email}</p>
    <p>{res.data.currentUser.age}</p>
  </div>
)}

In order to reduce abundant res.data.currentUser, we'd like to have code that if res.data.currentUser exists, assign or spread temporarily and use it to return jsx.

And you can do this with just a one lines of code:

export const fromObject = (obj) => (cb) => cb(obj)

in TypeScript:

export function fromObject<T extends Record<string, unknown>>(
  obj: T
): <R>(fn: (obj: T) => R) => R {
  return (fn) => fn(obj)
}

Then use it to clean up the code:

{res.data?.currentUser &&
  fromObject(res.data.currentUser)(({ name, email, age }) => (
    <div>
      <Avatar name={name} size="l" />
      <p>{name}</p>
      <p>{email}</p>
      <p>{age}</p>
    </div>
))}

Tada! looks way nicer, uh?

Though it's a simple solution, I've never seen in my more than 5 years of career as a React developer.
If you've done with similar solution or if you have any concerns, please let me know!

Using msw to test React with GraphQL effectively

Yoshihiro Nakamura — Fri, 17 Sep 2021 19:53:52 +0000

Testing React application is now easier than before thanks to the tools like jest, testing-library, jest-dom. But it gets kinda hard when you have to deal with side effects, especially api call. In this article, I'll show you how to test React with GraphQL easily and effectively by using msw.

Don't mock your client

When you search how to test React Component with GraphQL, you'll might see the articles or guides that shows how to mock graphql client or it's Provider.

import TestRenderer from 'react-test-renderer';
import { MockedProvider } from '@apollo/client/testing';
import { GET_DOG_QUERY, Dog } from './dog';

const mocks = [];

it('renders without error', () => {
  const component = TestRenderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );

  const tree = component.toJSON();
  expect(tree.children).toContain('Loading...');
});

This is how apollo client instructs.

And for urql, it also instructs the way to mock client.

import { mount } from 'enzyme';
import { Provider } from 'urql';
import { never } from 'wonka';
import { MyComponent } from './MyComponent';

it('renders', () => {
  const mockClient = {
    executeQuery: jest.fn(() => never),
    executeMutation: jest.fn(() => never),
    executeSubscription: jest.fn(() => never),
  };

  const wrapper = mount(
    <Provider value={mockClient}>
      <MyComponent />
    </Provider>
  );
});

Well, what's wrong with mocking?

It's tied to particular GraphQL Client. Tests will be broken if you change the client library one to another.
Mocked Provider possibly works different from real Provider running on production. What if your Provider includes complex logic that would affect your app's behavior?

MSW

https://mswjs.io/

MSW solves those problems. MSW (Mock Service Worker) is a REST/GraphQL API mocking library for browser and Node.js, that intercepts requests and act as a real server.

MSW intercepts requests on the network level, so by using msw in your test, you don't need to mock GraphQL Client, Provider anymore!

Then let's see how to write React component tests with msw.

Setup msw for testing

Example App

Before dive into msw, let's see how example app looks like.

Imagine we have a scheme like

  type Query {
    todos: [Todo!]!
  }

  type Mutation {
    saveTodo(todo: TodoInput!): Todo
  }

  type Todo {
    id: ID!
    title: String!
  }

  input TodoInput {
    title: String!
  }

And your app fetches todos

import { useQuery } from 'urql';

const TodosQuery = `
  query {
    todos {
      id
      title
    }
  }
`;

const Todos = () => {
  const [result] = useQuery({
    query: TodosQuery,
  });

  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <ul>
      {data.todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

msw setup

Following their docs, we should specify 3 files at first. Thanks to msw, you can define mock data fully type safely.

mocks/handlers.ts

import { graphql } from 'msw'
import { GetTodosDocument } from 'src/generated/graphql.ts/graphql'

export const handlers = [
  graphql.query(GetTodosDocument, (req, res, ctx) =>
    res(
      ctx.data({
        todos: [todoFactory(), todoFactory()], // fully typed
      })
    )
  ),
]

In this file, define your default handlers, which is supposed to be used in your tests widely. Each handlers can be overwritten in each test case.

todoFactory() is the mock factory function. I'll explain it later but it's just a function that returns mock data of todo.

mocks/server.ts

import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

jest.setup.ts

import { server } from './mocks/server'

// Establish API mocking before all tests.
beforeAll(() => {
  server.listen()
})

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
  server.resetHandlers()
})

// Clean up after the tests are finished.
afterAll(() => server.close())

Last two files are just template files.

Custom Render setup

As testing-library encourages, it's useful to define custom render. You can use your Graphql Client Provider that is used in production.

import { render } from '@testing-library/react'
import { GraphQLHandler, GraphQLRequest } from 'msw'

import { UrqlClientProvider } from './components/util/UrqlClientProvider'
import { server } from './mocks/server'

export const testRenderer =
  (children: React.ReactNode) =>
  (responseOverride?: GraphQLHandler<GraphQLRequest<never>>) => {
    if (responseOverride) {
      server.use(responseOverride)
    }
    render(<UrqlClientProvider>{children}</UrqlClientProvider>)
  }

Here testRenderer can accept responseOverride, which is aimed at overriding existing handler we defined earlier in mock/handlers.ts.

Write tests!

Basic

Now it's time to write actual tests! So for the Happy Path, we don't need to override default handlers, so just call renderPage function without parameters.

describe('Todos Page', () => {
  const renderPage = testRenderer(<Todos />)

  it('displays fetched todo list', async () => {
    renderPage()
    const target = await screen.findAllByTestId('todo')
    expect(target.length).toBe(2)
  })
})

Override handlers for edge case tests

And if you want to test edge case or when the test depends on particular mock response pattern, call renderPage with the handlers you want to override:

describe('Todos Page', () => {
  const renderPage = testRenderer(<Todos />)

  it('displays "No Items" when there is no todo', async () => {
    renderPage(
      // overrides existing GetTodosDocument query.
      graphql.query(GetTodosDocument, (req, res, ctx) =>
        res.once(
          ctx.data({
            todosByCurrentUser: [],
          })
        )
      )
    )
    const target = await screen.findByText('No Items')
    expect(target).toBeInTheDocument()
  })

  it('displays "completed" on the todo when fetched todo is completed', async () => {
    renderPage(
      // overrides existing GetTodosDocument query.
      graphql.query(GetTodosDocument, (req, res, ctx) =>
        res.once(
          ctx.data({
            todosByCurrentUser: [todoFactory({completed: true})],
          })
        )
      )
    )
    const todo = await screen.findByTestId('todo')
    expect(within(todo).getByText('completed')).toBeInTheDocument()
  })
})

mutation test

You can test mutation call by define interceptor mock function and pass variables in your msw handler:

describe('Todos Page', () => {
  const renderPage = testRenderer(<Todos />)

  it('should create new Todo', async () => {
    const mutationInterceptor = jest.fn()
    renderPage(
      graphql.mutation(SaveTodoDocument, (req, res, ctx) => {
        mutationInterceptor(req.variables) // pass the variables here
        return res.once(
          ctx.data({
            saveTodo: {
              __typename: 'Todo',
              id: '1',
            },
          })
        )
      })
    )

    const input = screen.getByLabelText('title')
    fireEvent.change(input, { target: { value: 'test' } })
    const submitButton = screen.getByText('Submit')
    fireEvent.click(submitButton)

    await waitFor(() =>
      expect(mutationInterceptor).toHaveBeenCalledWith({
        todo: {
          title: 'test',
        },
      } as SaveTodoMutationVariables)
    )
  })
})

mock factory pattern

In the example code above, I used todoFactory() function. Explained well in this post, but in a nutshell, it is a helper function that produces mock data easily and flexibly.

let nextFactoryIds: Record<string, number> = {}

export function resetFactoryIds() {
  nextFactoryIds = {}
}

export function nextFactoryId(objectName: string): string {
  const nextId = nextFactoryIds[objectName] || 1
  nextFactoryIds[objectName] = nextId + 1
  return String(nextId)
}

function todoFactory(options?: Partial<Todo>): Todo {
  return {
    __typename: 'Todo',
    id: nextFactoryId('Todo'),
    title: 'test todo',
    completed: false,
    ...options,
  }
}

// usage
todoFactory()
todoFactory({completed: true})

I'm implementing auto incremented id here but it's optional. If you want, don't forget to reset incremented ids in afterEach.

Summary

Avoid mock your Graphql Client or Provider.
MSW is a good fit for mocking graphql response.
Mock factory pattern might help you define mock data.

You can find entire code example in my boilerplate repo:
https://github.com/taneba/fullstack-graphql-app/blob/main/frontend/src/pages/todos/index.test.tsx

I hope you enjoyed and this article helps you in some way. Happy coding!

module-analyzr - A simple CLI and toolkit to extract usage of module

Yoshihiro Nakamura — Fri, 08 Jun 2018 11:59:19 +0000

Summary

I made a new npm package called module-analyzr. It extract the usage of a module in given files or directory or glob-pattern.

https://github.com/taneba/module-analyzr

Example

Imagine if you want to know the usage of React in your project,

# first, install it via npm
npm install -g module-analyzr


# then, in your project
module-analyzr react src
{ importedModules:
   [ { moduleName: 'Element', usageAmount: 2 },
     { moduleName: 'Component', usageAmount: 37 } ],
  importedDefault: 215,
  importedWithNameSpace: 0 }

Output object shows the usage of React in the src directory. It means Element imported twice, and Component imported 37　times, and import React from 'react' 215 times!

If it shows importedWithNameSpace with some number, it means there are number of import * as React from 'react'.

Motivation

I am a maintainer of a component library made of React in my company. It was hard to grasp how much each component is used in which project. So When I wanted to upgrade my lib with some breaking changes, I had to ask each engineer for the usage of components. module-analyzr is most useful for this kind of situation. I'm using module-analyzr in the backend system to analyze each passed github urls and visualize how much each component is used in all of projects!

In closing

It's my first time to ship open source project, so there may be some bugs😅
I've learned much from making this and wanna engage more in the open source community😀

I hope you'll be interested in this library!