diff --git a/.jest.js b/.jest.js index 7ed3f25067..778b157c91 100644 --- a/.jest.js +++ b/.jest.js @@ -10,6 +10,7 @@ const transformIgnorePatterns = [ module.exports = { verbose: true, setupFiles: ['./tests/setup.js'], + setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'], modulePathIgnorePatterns: ['/_site/'], moduleNameMapper: { diff --git a/.jest.node.js b/.jest.node.js index b1d5ee86b9..d91949fea1 100644 --- a/.jest.node.js +++ b/.jest.node.js @@ -3,6 +3,7 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest'); // jest config for server render environment module.exports = { setupFiles: ['./tests/setup.js'], + setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'md'], moduleNameMapper, transform: { diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js index b5ecb7e5e5..ad02f81973 100644 --- a/components/button/__tests__/index.test.js +++ b/components/button/__tests__/index.test.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { render, mount } from 'enzyme'; +import { mount } from 'enzyme'; import renderer from 'react-test-renderer'; import { SearchOutlined } from '@ant-design/icons'; import Button from '..'; @@ -26,8 +26,7 @@ describe('Button', () => { rtlTest(() => ); it('renders correctly', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); }); it('mount correctly', () => { @@ -45,40 +44,33 @@ describe('Button', () => { }); it('renders Chinese characters correctly', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); // should not insert space when there is icon - const wrapper1 = render(); - expect(wrapper1).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); // should not insert space when there is icon - const wrapper2 = render( + expect( , - ); - expect(wrapper2).toMatchSnapshot(); + ).toMatchRenderedSnapshot(); // should not insert space when there is icon - const wrapper3 = render(); - expect(wrapper3).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); // should not insert space when there is icon while loading - const wrapper4 = render( + expect( , - ); - expect(wrapper4).toMatchSnapshot(); + ).toMatchRenderedSnapshot(); // should insert space while loading - const wrapper5 = render(); - expect(wrapper5).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); // should insert space while only one nested element - const wrapper6 = render( + expect( , - ); - expect(wrapper6).toMatchSnapshot(); + ).toMatchRenderedSnapshot(); }); it('renders Chinese characters correctly in HOC', () => { @@ -103,8 +95,7 @@ describe('Button', () => { // https://github.com/ant-design/ant-design/issues/18118 it('should not insert space to link button', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); }); it('should render empty button without errors', () => { @@ -191,12 +182,9 @@ describe('Button', () => { }); it('fixbug renders {0} , 0 and {false}', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); - const wrapper1 = render(); - expect(wrapper1).toMatchSnapshot(); - const wrapper2 = render(); - expect(wrapper2).toMatchSnapshot(); + expect().toMatchRenderedSnapshot(); + expect().toMatchRenderedSnapshot(); + expect().toMatchRenderedSnapshot(); }); it('should has click wave effect', async () => { diff --git a/package.json b/package.json index ed7734ce2d..21cc95350b 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "lint:md": "remark components/", "lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'", "lint:style": "stylelint '{site,components}/**/*.less' --syntax less", - "lint:tsc": "npm run tsc", + "lint:tsc": "npm run tsc -- --noEmit", "pre-publish": "npm run check-commit && npm run test-all", "prettier": "prettier -c --write '**/*'", "pretty-quick": "pretty-quick", @@ -148,6 +148,7 @@ "@qixian.cs/github-contributors-list": "^1.0.3", "@stackblitz/sdk": "^1.3.0", "@types/classnames": "^2.2.8", + "@types/enzyme": "^3.10.5", "@types/gtag.js": "^0.0.3", "@types/jest": "^25.1.0", "@types/lodash": "^4.14.139", diff --git a/tests/matchers/rendered-snapshot.ts b/tests/matchers/rendered-snapshot.ts new file mode 100644 index 0000000000..9e102408c5 --- /dev/null +++ b/tests/matchers/rendered-snapshot.ts @@ -0,0 +1,21 @@ +import { render } from 'enzyme'; +import { ReactElement } from 'react'; + +export default function toMatchRenderedSnapshot( + this: jest.MatcherUtils, + jsx: ReactElement, +): { message(): string; pass: boolean } { + try { + expect(render(jsx)).toMatchSnapshot(); + + return { + message: () => 'expected JSX not to match snapshot', + pass: true, + }; + } catch (e) { + return { + message: () => `expected JSX to match snapshot: ${e.message}`, + pass: false, + }; + } +} diff --git a/tests/setupAfterEnv.ts b/tests/setupAfterEnv.ts new file mode 100644 index 0000000000..f88f29fed2 --- /dev/null +++ b/tests/setupAfterEnv.ts @@ -0,0 +1,5 @@ +import toMatchRenderedSnapshot from './matchers/rendered-snapshot'; + +expect.extend({ + toMatchRenderedSnapshot, +}); diff --git a/tests/shared/rtlTest.js b/tests/shared/rtlTest.js index 2bd72b56e8..94446a7e82 100644 --- a/tests/shared/rtlTest.js +++ b/tests/shared/rtlTest.js @@ -1,7 +1,7 @@ import React from 'react'; import Moment from 'moment'; import MockDate from 'mockdate'; -import { render, mount } from 'enzyme'; +import { mount } from 'enzyme'; import ConfigProvider from '../../components/config-provider'; // eslint-disable-next-line jest/no-export @@ -16,7 +16,7 @@ export default function rtlTest(Component, mockDate) { , ); - expect(render(wrapper)).toMatchSnapshot(); + expect(wrapper).toMatchRenderedSnapshot(); if (mockDate) { MockDate.reset(); } diff --git a/typings/jest.d.ts b/typings/jest.d.ts new file mode 100644 index 0000000000..e2022de6bf --- /dev/null +++ b/typings/jest.d.ts @@ -0,0 +1,5 @@ +declare namespace jest { + interface Matchers { + toMatchRenderedSnapshot(): R; + } +}