trinwin

import * as React from "react";

const Home = () => {
  return <h1>Welcome to My Next App!</h1>;
};

export default Home;

trinwin

import React from "react";
import { mount } from "enzyme";
import Home from "../../pages/index";
describe("Pages", () => {
  describe("Home", () => {
    it("should render without throwing an error", function () {
      const wrap = mount(<Home />);
      expect(wrap.find("h1").text()).toBe("Welcome to My Next App!");
    });
  });

trinwin

import React from "react";
import Button from "../Button";
import renderer from "react-test-renderer";

it("renders correctly", () => {
  const tree = renderer.create(<Button text="Some Text" />).toJSON();
  expect(tree).toMatchSnapshot();
});

trinwin

import { storiesOf } from "@storybook/react";
import Button from "./Button";

storiesOf("Button", module).add("with text", () => {
  return <Button text="Hello World" />;
});

storiesOf("Button", module).add("with emoji", () => {
  return <Button text="😀 😎 👍 💯" />;
});

trinwin

import * as React from "react";

type Props = {
  text: string;
};

export default ({ text }: Props) => <button>{text}</button>;

trinwin

html {
  background: #f1f1f1;
  max-width: 100%;
}

body {
  background: linear-gradient(
    315deg,
    var(#f1f1f1) 0%,
    var(#e7e7e7) 100%

trinwin

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,

trinwin

// Import global css here
import "../styles/global.scss";

trinwin

const path = require('path');

module.exports = {
  webpackFinal: async (baseConfig, options) => {
    const { module = {} } = baseConfig;
    
    const newConfig = {
      ...baseConfig,
      module: {
        ...module,

trinwin

const path = require("path");

module.exports = {
  stories: ["../components/**/*.stories.tsx"],
  addons: ["@storybook/preset-typescript"],
  // Add nextjs preset
  presets: [path.resolve(__dirname, "./next-preset.js")],
};