GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → arcatdmz → nextjs-with-jest-typescript

arcatdmz / nextjs-with-jest-typescript

Licence: MIT license
A very simple example of Next.js-based website with Jest tests, all written in TypeScript

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Labels

jestnextjscss-modules

Projects that are alternatives of or similar to nextjs-with-jest-typescript

Css Modules Typescript Loader
Webpack loader to create TypeScript declarations for CSS Modules
Stars: ✭ 172 (+145.71%)
Mutual labels:  css-modules
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (+234.29%)
Mutual labels:  css-modules
react-module-boilerplate
Sample React presentational components package.
Stars: ✭ 16 (-77.14%)
Mutual labels:  css-modules
Typed Scss Modules
🎁 Generate type definitions (.d.ts) for CSS Modules using SCSS
Stars: ✭ 192 (+174.29%)
Mutual labels:  css-modules
React Native Css Modules
Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
Stars: ✭ 207 (+195.71%)
Mutual labels:  css-modules
Css In Js 101
💈 CSS-in-JS 101: All you need to know
Stars: ✭ 252 (+260%)
Mutual labels:  css-modules
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (+135.71%)
Mutual labels:  css-modules
Mailbox
🌸🎉使用react+redux+webpack搭建的邮箱应用🎉🌸
Stars: ✭ 16 (-77.14%)
Mutual labels:  css-modules
React Styleable
React Component for portable styles
Stars: ✭ 214 (+205.71%)
Mutual labels:  css-modules
next-plugin-antd
A @zeit/next-less patch with full support for Ant Design, Less and CSS modules
Stars: ✭ 27 (-61.43%)
Mutual labels:  css-modules
Micron
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power
Stars: ✭ 2,252 (+3117.14%)
Mutual labels:  css-modules
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+20004.29%)
Mutual labels:  css-modules
react-css-modules-intellij-plugin
React CSS Modules support in IntelliJ IDEA and WebStorm for components written in JavaScript and TypeScript.
Stars: ✭ 41 (-41.43%)
Mutual labels:  css-modules
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (+160%)
Mutual labels:  css-modules
vital
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Stars: ✭ 151 (+115.71%)
Mutual labels:  css-modules
Babel Plugin React Css Modules
Transforms styleName to className using compile time CSS module resolution.
Stars: ✭ 1,989 (+2741.43%)
Mutual labels:  css-modules
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: ✭ 244 (+248.57%)
Mutual labels:  css-modules
hot-redux-chassis
Modern React/Redux/RxJS application using all the latest and greatest stuff from the community 🔥
Stars: ✭ 20 (-71.43%)
Mutual labels:  css-modules
posthtml-css-modules
Use CSS modules in HTML
Stars: ✭ 54 (-22.86%)
Mutual labels:  css-modules
rollup-plugin-stylus-css-modules
A Rollup.js plugin to compile Stylus and inject CSS Modules
Stars: ✭ 15 (-78.57%)
Mutual labels:  css-modules
View All Similar Projects ➔

nextjs-with-jest-typescript

A very simple example of Next.js-based website with Jest tests, all written in TypeScript.

install

$ yarn install

test

$ yarn test
yarn run v1.22.5
$ jest
 PASS  __tests__/index.test.tsx
  With Enzyme
    √ App shows "A simple example repo" in a <p> tag (7 ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.893 s, estimated 4 s
Ran all test suites.
Done in 4.09s.

code

  • package.json/jest: use ts-jest to test TypeScript files; use mocks for imported CSS/LESS files; use TypeScript compiler to handle both TS/JS files
  • jest.setup.ts: use enzyme to test with jQuery-like APIs
  • tsconfig.jest.json: handles JSX transformation by ts-jest during the test

see also

https://github.com/vercel/next.js/tree/master/examples/with-typescript-eslint-jest

  • does not use CSS files
  • uses babel-jest instead of ts-jest

https://github.com/arcatdmz/nextjs-with-jest-typescript

Issues

  • npm install issue resolved - refer - #3
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].