mike-plummer / nextjs-cypress-ct-example

MIT License
18 stars 6 forks source link

Feedback for App Router / SWC #1

Open mpelham opened 1 year ago

mpelham commented 1 year ago

Great example! Was super helpful in getting myself setup. The Caveats on App Router are slightly out of date, I was able to follow your example, and then upgrade to "swc-plugin-coverage-instrument": "^0.0.20",.

After that, my next build was failing locally, first when loading a font.

import { Inter } from "next/font/google";

// See: https://github.com/kwonoj/swc-plugin-coverage-instrument/issues/199#issuecomment-1463562229
/* istanbul ignore next */
const inter = Inter({ subsets: ["latin"] });

Adding the /* istanbul ignore next */ got me past this step.

After that, locally the app was failing module not found for fs.

I had to add this to my next.config.ts

  // See: https://stackoverflow.com/a/70995196
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };

    return config;
  },

But, after that, things worked great!

Screenshot 2023-09-01 at 4 02 38 PM

Also, I was able to get this working on Github Actions for CI / CD, here's an example Github Action!

name: Tests

on: [push]

jobs:
  install:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install CodeClimate Test Reporter
        run: curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter && chmod +x ./cc-test-reporter

      - name: Start Reporter
        run: ./cc-test-reporter before-build

      - name: Cypress Component Testing
        uses: cypress-io/github-action@v5
        with:
          component: true
          browser: chrome
          build: yarn build
          start: yarn start:standalone
          wait-on: "http://localhost:3000"

      - name: Send results to CodeClimate
        run: ./cc-test-reporter after-build --coverage-input-type lcov --exit-code $?
        env:
          CC_TEST_REPORTER_ID: YOUR_CC_TEST_REPORTER_ID_HERE

Thanks again for the great example!

mike-plummer commented 1 year ago

@mpelham Thanks for the feedback, glad this was helpful to you! I'll try to get your suggestions incorporated soon-ish; free time is hard to come by 😆

RezaRahemtola commented 1 year ago

Thanks @mpelham, spent hours figuring out the problem and your solution works just perfectly for me :+1: