From 9203386f91a1291046867ca053488c6ca53fb019 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.lund@gmail.com>
Date: Tue, 20 Dec 2022 10:18:13 +0100
Subject: [PATCH] Enable ReactRefreshLogBox scss test (#44180)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---
 .../ReactRefreshLogBox-scss.test.ts           |  8 +++++---
 .../ReactRefreshLogBox-scss.test.ts.snap      | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 test/development/acceptance-app/__snapshots__/ReactRefreshLogBox-scss.test.ts.snap

diff --git a/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts b/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts
index d5c4253706ab1a6..2d9328fe15e6694 100644
--- a/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts
+++ b/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts
@@ -4,9 +4,7 @@ import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import path from 'path'
 
-// TODO: figure out why snapshots mismatch on GitHub actions
-// specifically but work in docker and locally
-describe.skip('ReactRefreshLogBox app', () => {
+describe('ReactRefreshLogBox app', () => {
   let next: NextInstance
 
   beforeAll(async () => {
@@ -48,6 +46,10 @@ describe.skip('ReactRefreshLogBox app', () => {
     const source = await session.getRedboxSource()
     expect(source).toMatchSnapshot()
 
+    // Fix syntax error
+    await session.patch('index.module.scss', `.button { font-size: 5px; }`)
+    expect(await session.hasRedbox()).toBe(false)
+
     // Not local error
     await session.patch('index.module.scss', `button { font-size: 5px; }`)
     expect(await session.hasRedbox(true)).toBe(true)
diff --git a/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox-scss.test.ts.snap b/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox-scss.test.ts.snap
new file mode 100644
index 000000000000000..784c7600001310d
--- /dev/null
+++ b/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox-scss.test.ts.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactRefreshLogBox app scss syntax errors 1`] = `
+"./index.module.scss
+SassError: Expected expression.
+  ╷
+1 │ .button { font-size: :5px; }
+  │                      ^
+  ╵
+  index.module.scss 1:22  root stylesheet"
+`;
+
+exports[`ReactRefreshLogBox app scss syntax errors 2`] = `
+"./index.module.scss:1:1
+Syntax error: Selector \\"button\\" is not pure (pure selectors must contain at least one local class or id)
+
+> 1 | button { font-size: 5px; }
+    |                          ^"
+`;