e1fe28c849
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) ```
252 lines
5.3 KiB
JavaScript
252 lines
5.3 KiB
JavaScript
/* 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', () => {
|
|
const input = { module: { rules: [{ use: 'a' }] } }
|
|
const expected = { module: { rules: [{ use: 'a' }] } }
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toEqual(expected)
|
|
})
|
|
|
|
it('should skip adding when existing (shorthand)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: ['@next/react-refresh-utils/loader', 'rr'] }],
|
|
},
|
|
}
|
|
const expected = {
|
|
module: {
|
|
rules: [{ use: ['@next/react-refresh-utils/loader', 'rr'] }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toEqual(expected)
|
|
})
|
|
|
|
it('should skip adding when existing (longhand)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [
|
|
{ use: [require.resolve('@next/react-refresh-utils/loader'), 'rr'] },
|
|
],
|
|
},
|
|
}
|
|
const expected = {
|
|
module: {
|
|
rules: [
|
|
{ use: [require.resolve('@next/react-refresh-utils/loader'), 'rr'] },
|
|
],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toEqual(expected)
|
|
})
|
|
|
|
it('should add when missing (single, non-array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: 'rr' }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
expect.stringMatching(/react-refresh-utils[\\/]loader\.js/),
|
|
'rr',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should add when missing (single, array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: ['rr'] }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
expect.stringMatching(/react-refresh-utils[\\/]loader\.js/),
|
|
'rr',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should add when missing (before, array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: ['bla', 'rr'] }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'bla',
|
|
expect.stringMatching(/react-refresh-utils[\\/]loader\.js/),
|
|
'rr',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should add when missing (after, array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: ['rr', 'bla'] }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
expect.stringMatching(/react-refresh-utils[\\/]loader\.js/),
|
|
'rr',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should add when missing (multi, array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [{ use: ['hehe', 'haha', 'rawr', 'rr', 'lol', 'bla'] }],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'hehe',
|
|
'haha',
|
|
'rawr',
|
|
expect.stringMatching(/react-refresh-utils[\\/]loader\.js/),
|
|
'rr',
|
|
'lol',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should skip when present (multi, array)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'hehe',
|
|
'haha',
|
|
'@next/react-refresh-utils/loader',
|
|
'rr',
|
|
'lol',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'hehe',
|
|
'haha',
|
|
'@next/react-refresh-utils/loader',
|
|
'rr',
|
|
'lol',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
|
|
it('should skip when present (multi, array, wrong order)', () => {
|
|
const input = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'hehe',
|
|
'haha',
|
|
'rr',
|
|
'lol',
|
|
'@next/react-refresh-utils/loader',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
attachReactRefresh(input, 'rr')
|
|
expect(input).toMatchObject({
|
|
module: {
|
|
rules: [
|
|
{
|
|
use: [
|
|
'hehe',
|
|
'haha',
|
|
'rr',
|
|
'lol',
|
|
'@next/react-refresh-utils/loader',
|
|
'bla',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
})
|
|
})
|
|
})
|