add prod tests

Author: Andarist

.github/workflows/main.yml

@@ -51,6 +51,16 @@ jobs:
       - name: Run Tests with React 18
         run: yarn test:react18:ci
 
+  test_prod:
+    name: Test Prod
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
+
+      - name: Prod Tests
+        run: yarn test:prod
+
   test_dist:
     name: Test Dist
     runs-on: ubuntu-latest
@@ -59,7 +69,7 @@ jobs:
       - uses: ./.github/actions/ci-setup
 
       - name: Dist Tests
-        run: yarn test:prod
+        run: yarn test:dist
 
   linting:
     name: Linting

jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
     '/site/',
     '/types/'
   ],
-  setupFilesAfterEnv: ['<rootDir>/test/testSetup.js'],
+  setupFilesAfterEnv: ['test-utils/testSetup.js'],
   coveragePathIgnorePatterns: [
     '/node_modules/',
     '<rootDir>/packages/babel-plugin/test/util.js'

jest.prod.js

@@ -0,0 +1,11 @@
+const baseConfig = require('./jest.config.js')
+
+module.exports = Object.assign({}, baseConfig, {
+  testEnvironmentOptions: {
+    ...baseConfig.testEnvironmentOptions,
+    customExportConditions:
+      baseConfig.testEnvironmentOptions.customExportConditions.filter(
+        c => c !== 'development'
+      )
+  }
+})

package.json

@@ -13,7 +13,8 @@
     "test:typescript": "yarn workspaces foreach --verbose --exclude emotion-monorepo run test:typescript",
     "test:ci": "jest --coverage --no-cache --ci --runInBand",
     "test:react18:ci": "yarn test:react18 --coverage --no-cache --ci --runInBand",
-    "test:prod": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
+    "test:dist": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
+    "test:prod": "jest -c jest.prod.js --no-cache --ci --runInBand",
     "lint:check": "eslint .",
     "test:watch": "jest --watch",
     "size": "bundlesize",

packages/cache/__tests__/index.js

@@ -11,7 +11,7 @@ test('throws correct error with invalid key', () => {
   }).toThrowErrorMatchingSnapshot()
 })
 
-it('should accept insertionPoint option', () => {
+test('should accept insertionPoint option', () => {
   const head = safeQuerySelector('head')
 
   head.innerHTML = `
@@ -34,7 +34,7 @@ it('should accept insertionPoint option', () => {
   expect(document.head).toMatchSnapshot()
 })
 
-it('should accept container option', () => {
+test('should accept container option', () => {
   const body = safeQuerySelector('body')
 
   body.innerHTML = `

packages/css/test/no-babel/warnings.test.js

@@ -7,7 +7,7 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-it('warns about illegal escape sequences inside first quasi of template literal', () => {
+test('warns about illegal escape sequences inside first quasi of template literal', () => {
   css`
     :before {
       content: '\00d7';
@@ -24,7 +24,7 @@ it('warns about illegal escape sequences inside first quasi of template literal'
   `)
 })
 
-it('warns about illegal escape sequences inside non-first quasi of template literal', () => {
+test('warns about illegal escape sequences inside non-first quasi of template literal', () => {
   const color = `color: hotpink`
   css`
     background-color: black;

packages/css/test/warnings.test.js

@@ -34,15 +34,15 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-it('does not warn when valid values are passed for the content property', () => {
+test('does not warn when valid values are passed for the content property', () => {
   const cls = css(validValues.map(value => ({ content: value })))
   expect(console.error).not.toBeCalled()
   expect(renderer.create(<div className={cls} />).toJSON()).toMatchSnapshot()
 })
 
 const invalidValues = ['this is not valid', '']
 
-it('does warn when invalid values are passed for the content property', () => {
+test('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
     expect(() =>
       renderer.create(<div className={css({ content: value })} />)
@@ -52,14 +52,14 @@ it('does warn when invalid values are passed for the content property', () => {
   })
 })
 
-it('does warn when functions are passed to css calls', () => {
+test('does warn when functions are passed to css calls', () => {
   css(() => 'color:hotpink;')
   expect(console.error).toBeCalledWith(
     "Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`"
   )
 })
 
-it('does warn when @import rule is being inserted after order-insensitive rules', () => {
+test('does warn when @import rule is being inserted after order-insensitive rules', () => {
   const { injectGlobal } = createCss({ key: 'import-after-regular' })
 
   injectGlobal`.thing {display:flex;}`

packages/hash/__tests__/index.js

@@ -1,5 +1,5 @@
 import hash from '@emotion/hash'
 
-it('accepts a string and returns a string as a hash', () => {
+test('accepts a string and returns a string as a hash', () => {
   expect(hash('something')).toBe('crsxd7')
 })

packages/jest/test/matchers.test.js

@@ -22,7 +22,7 @@ describe('toHaveStyleRule', () => {
     width: 100%;
   `
 
-  it('matches styles on the top-most node passed in', () => {
+  test('matches styles on the top-most node passed in', () => {
     const tree = renderer
       .create(
         <div css={divStyle}>
@@ -40,7 +40,7 @@ describe('toHaveStyleRule', () => {
     expect(svgNode).not.toHaveStyleRule('color', 'red')
   })
 
-  it('supports asymmetric matchers', () => {
+  test('supports asymmetric matchers', () => {
     const tree = renderer
       .create(
         <div css={divStyle}>
@@ -57,14 +57,14 @@ describe('toHaveStyleRule', () => {
     expect(svgNode).toHaveStyleRule('width', expect.stringMatching(/.*%$/))
   })
 
-  it('fails if no styles are found', () => {
+  test('fails if no styles are found', () => {
     const tree = renderer.create(<div />).toJSON()
     const result = toHaveStyleRule(tree, 'color', 'red')
     expect(result.pass).toBe(false)
     expect(result.message()).toBe('Property not found: color')
   })
 
-  it('supports regex values', () => {
+  test('supports regex values', () => {
     const tree = renderer.create(<div css={divStyle} />).toJSON()
     expect(tree).toHaveStyleRule('color', /red/)
   })
@@ -81,7 +81,7 @@ describe('toHaveStyleRule', () => {
     expect(resultPass.message()).toMatchSnapshot()
   })
 
-  it('matches styles on the focus, hover targets', () => {
+  test('matches styles on the focus, hover targets', () => {
     const localDivStyle = css`
       color: white;
       &:hover {
@@ -104,7 +104,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('color', 'white')
   })
 
-  it('matches styles on the nested component or html element', () => {
+  test('matches styles on the nested component or html element', () => {
     const Svg = styled('svg')`
       width: 100%;
       fill: blue;
@@ -134,7 +134,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` })
   })
 
-  it('matches target styles by regex', () => {
+  test('matches target styles by regex', () => {
     const localDivStyle = css`
       a {
         color: yellow;
@@ -154,7 +154,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ })
   })
 
-  it('matches proper style for css', () => {
+  test('matches proper style for css', () => {
     const tree = renderer
       .create(
         <div
@@ -169,7 +169,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('color', 'hotpink')
   })
 
-  it('matches style of the media', () => {
+  test('matches style of the media', () => {
     const Svg = styled('svg')`
       width: 100%;
     `
@@ -212,7 +212,7 @@ describe('toHaveStyleRule', () => {
     })
   })
 
-  it('matches styles with target and media options', () => {
+  test('matches styles with target and media options', () => {
     const localDivStyle = css`
       color: white;
       @media (min-width: 420px) {
@@ -240,7 +240,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('color', 'white')
   })
 
-  it('fails if option media invalid', () => {
+  test('fails if option media invalid', () => {
     const Div = styled('div')`
       font-size: 30px;
       @media (min-width: 420px) {
@@ -257,7 +257,7 @@ describe('toHaveStyleRule', () => {
     expect(result.message()).toBe('Property not found: font-size')
   })
 
-  it('matches styles for a component used as selector', () => {
+  test('matches styles for a component used as selector', () => {
     const Bar = styled.div``
 
     const Foo = styled.div`
@@ -278,7 +278,7 @@ describe('toHaveStyleRule', () => {
     expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
   })
 
-  it('takes specificity into account when matching styles (basic)', () => {
+  test('takes specificity into account when matching styles (basic)', () => {
     const Bar = styled.div`
       color: yellow;
     `
@@ -302,7 +302,7 @@ describe('toHaveStyleRule', () => {
     expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
   })
 
-  it('should throw a friendly error when it receives an array', () => {
+  test('should throw a friendly error when it receives an array', () => {
     const tree = renderer
       .create(
         <>
@@ -323,7 +323,7 @@ describe('toHaveStyleRule', () => {
     )
   })
   ;(isReact16 ? describe : describe.skip)('enzyme', () => {
-    it('supports enzyme `mount` method', () => {
+    test('supports enzyme `mount` method', () => {
       const Component = () => (
         <div css={divStyle}>
           <svg css={svgStyle} />
@@ -338,7 +338,7 @@ describe('toHaveStyleRule', () => {
       expect(svgNode).not.toHaveStyleRule('color', 'red')
     })
 
-    it('supports enzyme `render` method', () => {
+    test('supports enzyme `render` method', () => {
       const Component = () => (
         <div css={divStyle}>
           <svg css={svgStyle} />
@@ -353,7 +353,7 @@ describe('toHaveStyleRule', () => {
       expect(svgNode).not.toHaveStyleRule('color', 'red')
     })
 
-    it('supports enzyme `shallow` method', () => {
+    test('supports enzyme `shallow` method', () => {
       const Component = () => (
         <div css={divStyle}>
           <svg css={svgStyle} />
@@ -368,7 +368,7 @@ describe('toHaveStyleRule', () => {
       expect(svgNode).not.toHaveStyleRule('color', 'red')
     })
 
-    it('supports styled components', () => {
+    test('supports styled components', () => {
       const Div = styled('div')`
         color: red;
       `

packages/jest/test/printer.test.js

@@ -22,7 +22,7 @@ describe('jest-emotion with dom elements', () => {
     width: 100%;
   `
 
-  it('replaces class names and inserts styles into React test component snapshots', () => {
+  test('replaces class names and inserts styles into React test component snapshots', () => {
     const tree = renderer
       .create(
         <div css={divStyle}>
@@ -38,7 +38,7 @@ describe('jest-emotion with dom elements', () => {
     expect(output).toMatchSnapshot()
   })
 
-  it('replaces class names and inserts styles into DOM element snapshots', () => {
+  test('replaces class names and inserts styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -65,7 +65,7 @@ describe('jest-emotion with DOM elements disabled', () => {
     width: 100%;
   `
 
-  it('replaces class names and inserts styles into React test component snapshots', () => {
+  test('replaces class names and inserts styles into React test component snapshots', () => {
     const tree = renderer
       .create(
         <div css={divStyle}>
@@ -81,7 +81,7 @@ describe('jest-emotion with DOM elements disabled', () => {
     expect(output).toMatchSnapshot()
   })
 
-  it('does not replace class names or insert styles into DOM element snapshots', () => {
+  test('does not replace class names or insert styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -150,7 +150,7 @@ describe('jest-emotion with nested selectors', () => {
     }
   `
 
-  it('replaces class names and inserts styles into React test component snapshots', () => {
+  test('replaces class names and inserts styles into React test component snapshots', () => {
     const tree = renderer.create(<div css={divStyle} />).toJSON()
 
     const output = prettyFormat(tree, {

packages/native/test/native-css.test.js

@@ -80,7 +80,7 @@ describe('Emotion native css', () => {
     ).toEqual(['color', 'flex', 'backgroundColor', 'flexGrow', 'flexDirection'])
   })
 
-  it('allows function interpolations when this.mergedProps is defined', () => {
+  test('allows function interpolations when this.mergedProps is defined', () => {
     expect(
       StyleSheet.flatten(
         css.call({ thing: true }, props => ({
@@ -90,7 +90,7 @@ describe('Emotion native css', () => {
     ).toEqual({ color: 'hotpink' })
   })
 
-  it('works with nested functions', () => {
+  test('works with nested functions', () => {
     expect(
       StyleSheet.flatten(
         css.call({ thing: true }, props => () => ({
@@ -100,7 +100,7 @@ describe('Emotion native css', () => {
     ).toEqual({ color: 'hotpink' })
   })
 
-  it('works with functions in tagged template literals', () => {
+  test('works with functions in tagged template literals', () => {
     expect(
       StyleSheet.flatten(
         css.call(