An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
June 8, 2022 01:56 am GMT
Original Link: https://dev.to/jtakahashi64/how-to-set-up-nextjs-storybook-jest-c99
How to set up Next.js Storybook jest
Storybook is a testing tool.
This article describes how to set up Next.js + Storybook + jest.
Next.js + Storybook
How to set up Next.js + Storybook
https://dev.to/jtakahashi64/how-to-set-up-storybook-with-nextjs-4a3a
Install
npm i --save-dev ts-nodenpm i --save-dev jestnpm i --save-dev jest-environment-jsdomnpm i --save-dev ts-jestnpm i --save-dev @storybook/testing-reactnpm i --save-dev @testing-library/jest-domnpm i --save-dev @testing-library/react
Settings
# package.json{ "scripts": { "test": "jest" }}
// jest.config.tsexport default { preset: "ts-jest", testEnvironment: "jsdom", globals: { "ts-jest": { tsconfig: "./tsconfig.jest.json", }, }, moduleNameMapper: { "@/(.*)": "<rootDir>/src/$1", },};
# tsconfig.jest.json{ "extends": "./tsconfig", "compilerOptions": { "jsx": "react-jsx" }}
Write
// src/components/example.test.tsximport { composeStories } from "@storybook/testing-react";import { render } from "@testing-library/react";import "@testing-library/jest-dom";import * as stories from "@/components/example.stories";describe("components/Example", () => { const { Default } = composeStories(stories); test("Show text", () => { const { getByTestId } = render(<Default text="This is a test text." />); const text = getByTestId("text"); expect(text).toHaveTextContent("This is a test text."); });});
Run
npm run test
Original Link: https://dev.to/jtakahashi64/how-to-set-up-nextjs-storybook-jest-c99
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To