Fix and add test filterModuleRules for next-plugin-storybook (#17306)

I tried the preset provided at `packages/next-plugin-storybook` but it was raising error due to an [unsafe negation](https://eslint.org/docs/rules/no-unsafe-negation) in the `preset.js` file.

I added a test to show the error:
```
● next-plugin-storybook filterModuleRules › should filter module rules correctly

    TypeError: rule.test.test is not a function

      48 |       if (!rule.test instanceof RegExp) return true
      49 |       // use Next.js' built-in CSS
    > 50 |       if (rule.test.test('hello.css')) {
         |                     ^
      51 |         return false
      52 |       }
      53 |       // use next-babel-loader instead of storybook's babel-loader

      at filter (../packages/next-plugin-storybook/preset.js:50:21)
          at Array.filter (<anonymous>)
      at Object.filterModuleRules (../packages/next-plugin-storybook/preset.js:46:28)
      at Object.<anonymous> (unit/webpack-config-overrides.test.js:12:36)
```

packages/next-plugin-storybook/preset.js

@@ -25,7 +25,25 @@ async function webpackFinal(config) {
     ...nextWebpackConfig.resolve,
   }
 
-  config.module.rules = [
+  config.module.rules = {
+    ...filterModuleRules(config),
+    ...nextWebpackConfig.module.rules.map((rule) => {
+      // we need to resolve next-babel-loader since it's not available
+      // relative with storybook's config
+      if (rule.use && rule.use.loader === 'next-babel-loader') {
+        rule.use.loader = require.resolve(
+          'next/dist/build/webpack/loaders/next-babel-loader'
+        )
+      }
+      return rule
+    }),
+  }
+
+  return config
+}
+
+function filterModuleRules(config) {
+  return [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
       if (!(rule.test instanceof RegExp)) return true
@@ -43,21 +61,10 @@ async function webpackFinal(config) {
       }
       return true
     }),
-    ...nextWebpackConfig.module.rules.map((rule) => {
-      // we need to resolve next-babel-loader since it's not available
-      // relative with storybook's config
-      if (rule.use && rule.use.loader === 'next-babel-loader') {
-        rule.use.loader = require.resolve(
-          'next/dist/build/webpack/loaders/next-babel-loader'
-        )
-      }
-      return rule
-    }),
   ]
-
-  return config
 }
 
 module.exports = {
   webpackFinal,
+  filterModuleRules,
 }

test/unit/webpack-config-overrides.unit.test.js

@@ -1,5 +1,18 @@
 /* eslint-env jest */
 import { attachReactRefresh } from 'next/dist/build/webpack-config'
+import * as storybookPlugin from '../../packages/next-plugin-storybook/preset'
+
+describe('next-plugin-storybook filterModuleRules', () => {
+  it('should filter module rules correctly', async () => {
+    const input = {
+      module: { rules: [{ test: 'babel-loader' }, { test: /.*\.css/ }] },
+    }
+    const expected = [{ test: 'babel-loader' }]
+
+    const output = storybookPlugin.filterModuleRules(input)
+    expect(output).toEqual(expected)
+  })
+})
 
 describe('webpack-config attachReactRefresh', () => {
   it('should skip adding when unrelated', () => {