test: set up component testing environment with Storybook, Jest, and Chromatic CI job

[dazedbear]

Goal

Based on the testing strategy (#56), add the below changes

• set up the environment for Storybook
• set up snapshot testing using Jest, @storybook/testing-react
• set up Chromatic CI job
• enable unit test checking in Vercel builds.

Knowledge Transfer / Notes

storybook main.ts compatibility issue with nextjs and jest

Although this storybook official guide tell you that you can use .storybook/main.ts instead of .storybook/main.js. However, it's broken due to the below issue when running Jest testing.

I have found a solution yet, so just keep using .storybook/main.js for now.

ERR! /Users/xxxxxx/Projects/xxxxxx/xxxxxx/.storybook/main.ts:14
ERR! export {};
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Unexpected token 'export'

• Next.js + TypeScript + Storybook compatibility issues storybookjs/storybook#9610 (comment)

css parsing issue in Jest

If your test files contain import 'src/styles/global.css like importing pure stylesheet or css modules, Jest cannot parse them correctly, especially when you use tailwind css. This issue can be reproduce when running component snapshot test with @storybook/testing-react addons.

Please refer to the below docs to mock those css files with moduleNameMapper.

• https://jestjs.io/docs/webpack#mocking-css-modules
• https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object

react-testing-library issue

Cannot find module 'react-dom/client' from '../../node_modules/@testing-library/react/dist/pure.js'

Per testing-library/react-testing-library#1038, @testing-library/react-testing-library v13 only supports React 18 which introduced react-dom/client. Downgrade to use v12 for a short-term fix.

Tailwind CSS style loading issue in storybook

If you configure important in your tailwind.config.js, you may encounter the issue that all styles are missing in the storybook.

Since we cannot modify the #root id of storybook (per storybookjs/storybook#11296),
creating a decorator to add a wrapper with id app can fix this issue.

https://storybook.js.org/docs/react/writing-stories/decorators#wrap-stories-with-extra-markup

// .storybook/preview.tsx

import '../src/styles/global.css'
import React from 'react'

const withAppContainer = (Story) => (
  <div id="app">
    <Story />
  </div>
)

export const decorators = [withAppContainer]

Reference

Chromatic

• https://www.chromatic.com/docs/github-actions
• https://github.com/marketplace/actions/publish-to-chromatic

Storybook

• https://storybook.js.org/docs/react/writing-tests/snapshot-testing
• https://storybook.js.org/docs/react/writing-tests/visual-testing
• https://storybook.js.org/docs/react/writing-tests/test-runner
• https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests

Storybook Addons

• https://storybook.js.org/addons/@storybook/testing-react
• https://storybook.js.org/addons/storybook-addon-root-attribute
• https://storybook.js.org/addons/storybook-addon-next
• https://storybook.js.org/addons/@storybook/addon-storyshots

React Testing

• https://testing-library.com/docs/queries/bytestid
• https://zh-hant.reactjs.org/docs/testing-environments.html

Tailwind CSS

• https://tailwindcss.com/docs/configuration#important

TypeScript

• https://www.typescriptlang.org/tsconfig

Jest

• https://kulshekhar.github.io/ts-jest/

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
dazedbear-github-io	✅ Ready (Inspect)	Visit Preview	Aug 28, 2022 at 3:48PM (UTC)